输入一个url后浏览器干了啥？（webKit的网页渲染过程）

浏览器的主要做用是将用户输入的“URL”转变为可视化图像 ，其中包含两个过程：

• 其一是网页加载过程，就是从 URL到构建DOM树
• 其二就是网页渲染过程，从DOM生成可视化图像

其实这两个过程也会交叉，咱们能够统称为 网页的渲染过程 网页渲染有一个特性，一般视图比屏幕可视化面积大。因此在渲染时通常 加入滚动条，就用户体验来讲，垂直方向的滚动条效果好过水平页面的滚动条效果

这个过程当中的数据和模块包括：

数据：

• 网页内容
• DOM
• 内部表示和图像

模块则包括

• HTML 解释器
• css 解释器
• javascript引擎
• 布局和绘图模块

根据数据的流向，能够把过程分为三个阶段:

• 第一个阶段就是从网页的URL到构建完DOM树
• 第二个阶段是从DOM树到构建完WebKit的绘图上下文
• 第三个阶段是从绘图上下文生成最终的图像

第一阶段 从网页的URL到构建完DOM树

具体过程以下：

1. 当用户输入网页URL时，WebKit调用资源加载器加载该URL对应的网页
2. 加载器依赖网络创建链接，发送请求并接受答复。
3. WebKit接受到各类网页或者资源的连接，其中某些资源经过同步或者异步获取
4. 网页被交给 HTML解释器解释为一系列词语
5. 解释器根据词语构建节点（NODE），造成DOM树。
6. 若是节点是JavaScript代码就调用JavaScript引擎解释并执行
7. JavaScript代码可能会修改DOM树的结构
8. 若是节点须要依赖其余资源，例如图片，css ，视频等，调用资源加载器来加载他们但这个过程异步的，不会阻碍当前dom树的构建，若是是javascript 资源url（没有标记异步，经过async和defer）则须要中止当前DOM树的建立 。直到js资源加载并执行完毕以后才会继续DOM树的建立

上述过程当中，网页会发出“DOMConent”和DOM onload事件，分别在DOM树构建完以后，以及DOM树建完而且网页因此来的资源都加载完以后发生，由于某些资源的加载并不会阻碍DOM树的建立，因此这两个事件多数时候不是同时发生的

DOMConentLoad: DOM树构建完以后 onload : DOM树建完而且网页因此来的资源都加载完

第二阶段 webkit利用cssTree和DOMTree构建renderTree 直到绘图上下文

这一阶段的具体过程以下：

1. CSS文件被CSS解释器解释成内部表示结构。
2. CSS解释器工做完以后，在DOM树上附加解释后的样式信息，这就是RenderObject树
3. RenderObject节点在建立的同时,WebKit会根据网页的层次信息建立RenderLayer树,同时构建一个虚拟的绘图上下文

RenderObject树的简历并不表示DOM树会被销毁,事实上,上图中的四个内部结构一直存在,直到网页被销毁,由于它们对于网页的渲染起了很是大的做用

第三个阶段是 从绘图上下文到最终的图像(主要依赖2D和3D图形库)

1. 绘图上下文是一个与平台无关的抽象类,他将绘图操做侨接到不一样的具体实现类。
2. 须要Chromium的合成器来完成多进程和GPU加速机制
3. 绘图实现类将2D图像库或者3D图像库绘制的结果保存下来,交给浏览器来同浏览器界面一块儿显示

上面介绍的是一个完整的渲染过程.现代网页不少是动态网页,这意味着在渲染完成以后,因为网页的动画或者用户的交互,浏览器其实一直在不一样地重复执行渲染过程

欢迎关注个人公众号FE未道 ，不间断更新， 咱们一块儿脚踏实地，仰望星空。