首页 > 其他分享 >从输入URL后浏览器的渲染逻辑

从输入URL后浏览器的渲染逻辑

时间:2023-04-03 19:58:43浏览次数:36  
标签:浏览器 DOM URL 渲染 进程 页面

从输入URL到浏览器渲染页面需要经过很多过程,本文简单说明下各个环节的内容

主要渲染节点如下:

一、浏览器进程说明

出于安全考虑,打开一个浏览器的Tab页签,会生成1个浏览器主进程、1个网络进程、1个GPU进程以及多个渲染进程和多个插件进程,所以不同页签数据无法相互访问,

多个进程也可以提高渲染的速度,最直接的现象就是打开浏览器后,任务管理器会出现多个Google页面的进程但是渲染进程与其他的进程有些区别,可见下文

1. 浏览器主进程:中控系统,主要复杂与用户交互、子进程管理和文件存储的功能

2. 网络进程:面向渲染进程和浏览器主进程提供网络下载功能。

3. 渲染进程:把下载到的HTML、css、JavaScript、图片等资源解析为可以显示和交互的页面,由于下载的代码可能存在恶意代码,所以渲染进程在安全沙箱允许,提供系统的安全性;

      还有一个注意点,如果多个页签打开同一个网站,则这几个网站共用一个渲染进程,提高渲染效率,最直观现象:比如某个页签卡死了,则其他页签同网站的代码也卡死了,但是不同域的网站却可以正常操作。

      新开一个页签一般只有一个渲染进程,但是如果页面中包含iframe时会存在多个渲染进程

4. GPU进程:最初用于渲染3D效果,后来也被用于渲染UI

5. 插件进程:负责浏览器插件的运行,因为插件崩溃机率较大,所以运行在沙箱环境中

 

二、页面渲染的主要步骤

 

1. 输入URL,,组装完整的URL

2. 检查本地是否有IP地址缓存(如果没有则进行DNS查询),主进程通过IPC把URL发送给网络进程

3. 查找本地资源,资源是否在有效期内

3. 进入TCP队列,然后创建TCP连接(三次握手)

4. 发送HTTP请求,包含cookie,请求体等信息

5. 网络进程接受请求,判断请求体状态(200: 根据响应头的Content-type决定如何响应; 301/302:重定向;304:资源有缓存)

6. 准备渲染进程,判断是否是同域站点,决定是否复用渲染进程

7. 浏览器主进程收到网络进程的响应头数据,像渲染进程发送【提交文档】消息

8. 渲染进程收到【提交文档】消息后,与网络进程建立传输通道

9. 主进程收到【确认提交】消息后,移除就文档、更新界面和地址栏等内容(期间浏览器加载中的小圆圈状态会从请求时的逆时针变为渲染阶段的顺时针旋转)

10.  收到页面,解析HTML标签,构建DOM树

11. 遇到CSS则进行CSS下载和解析生成CSS树(CSSOM,使用window.getComputedStyle可以获取查看),每个节点具体的样式,然后继续解析HTML;如果标签中有defer和async属性,则解析DOM和下载资源同步执行

12. 接下来则是进行页面布局,DOM和CSSOM结合生成渲染树,计算每个节点的位置和样式

13. 每个节点生成专用图层,包含位置属性,颜色值和透明度等

14. 渲染引擎对图层树进行渲染,如果期间DOM的颜色有变化则会触发重绘功能,如果位置有变化或者出现DOM增删则会触发重排功能

 

标签:浏览器,DOM,URL,渲染,进程,页面
From: https://www.cnblogs.com/codeOnMar/p/17266482.html

相关文章

  • js 获取dom的绝对位置,相对于浏览器显示界面
    //获取左边functiongetElementLeft(element){varactualLeft=element.offsetLeft;varcurrent=element.offsetParent;while(current!==null){actualLeft+=current.offsetLeft;current=current.offsetParent;......
  • 浏览器环境自吐模块
    https://github.com/daisixuan/r0chrome使用chromium查看js使用那些环境dtavm={}dtavm.log=console.logdtavm.proxy=function(obj,objname,type){functiongetMethodHandler(WatchName,target_obj){letmethodhandler={apply(target,thisAr......
  • chrome模拟微信浏览器内核
     1、ios-QQ——内置浏览器UAMozilla/5.0(iPhone;CPUiPhoneOS7_1_2likeMacOSX)>AppleWebKit/537.51.2(KHTML,likeGecko)Mobile/11D257>QQ/5.2.1.302NetType/WIFIMem/282、ios-微信——微信内置浏览器UAMozilla/5.0(iPhone;CPUiPhoneOS7_1_2......
  • 实时云渲染是元宇宙的关键组成部分
    01.元宇宙和实时云渲染的关系元宇宙是一个虚拟的世界,可以通过数字技术来构建和呈现。而实时云渲染是一种云端渲染技术,它可以在渲染过程中对实时场景进行实时渲染,从而更加真实地模拟现实世界中的场景。元宇宙和实时云渲染之间有着密切的关系。元宇宙需要通过云端渲染来呈现虚拟世......
  • 升级360浏览器到最新版本,收藏夹里数据不见了解决办法
    360为就旧版本,有时候会有些js的问题,今天将浏览器升级到最新版本,突然发现收藏夹里的链接都没有了。在360里的帮助与反馈,常见问题里,找到了这个解决办法,记录下我的解决过程。我这边点击收藏,备份/还原,从历史版本中恢复,里面有近几年的版本,找到前几天正常时候的,点击恢复即可。......
  • 实现一个函数用来解析 URL 的 querystring
    实现如下效果consturl="https://xxxx.com?a=3&b=4&c=5&name=1+1=2";//解析后得到qs如下constqs={a:3,b:4,c:5,name:'1+1=2'};纯碎使用 javascript 完成解析函数,而不利用浏览器DOM特性API,代码如下所示,细节在注释中体现functionparse(url......
  • 全网最详细中英文ChatGPT-GPT-4示例文档-复杂函数快速转单行函数从0到1快速入门——官
    目录Introduce简介setting设置Prompt提示Sampleresponse回复样本APIrequest接口请求python接口请求示例node.js接口请求示例curl命令示例json格式示例其它资料下载ChatGPT是目前最先进的AI聊天机器人,它能够理解图片和文字,生成流畅和有趣的回答。如果你想跟上AI时代的潮流......
  • 【原理揭秘】Vite 是怎么兼容老旧浏览器的?你以为仅仅依靠 Babel?
    作者:京东科技孙凯一、前言对前端开发者来说,Vite应该不算陌生了,它是一款基于nobundle和bundleless思想诞生的前端开发与构建工具,官网对它的概括和期待只有一句话:“下一代的前端工具链”。Vite最早的版本由尤雨溪发布于3年前,经历了3年多的发展,Vite也已逐渐迭代成熟,它的稳定性......
  • Flask的url_for怎么传参?url_for('方法名', key='value') 塔猫
    直接看官方例子:fromflaskimportFlask,escape,url_forapp=Flask(__name__)@app.route('/')defindex():return'index'@app.route('/login')deflogin():return'login'@app.route('/user/<username&g......
  • 由于链接地址长度过长引起的”HTTP Error 400. The request URL is invalid”错误解决
    网站中,设计了一个批量搜索的功能,用户可以输入多个关键词进行批量查询搜索,但不出意外的话还是出意外了,有些用户可能会输入N多个关键词,我为了性能等考虑,会限制个数,比如每次批量查询仅限50个以内,但还是有意外发生,有些关键词可能会很长,即会引发”HTTPError400.TherequestURLisi......