webkit页面渲染

日期:2018-02-06       浏览:717

一 HTML 文档的解析

1、当用户输入网页 url 的时候,webkit 调用其资源加载器加载该 url 对应的网页。
2、加载器依赖网络模块建立连接,发起请求并接收答复。
3、webkit 接收到各种网页或者资源的数据,其中某些资源可以是同步或者异步获取的。
4、网页被交给 html 解析器转变成一系列的词语(token)。
5、解析器根据词语构建节点(node),形成 dom 树。
6、如果节点是 javascript 代码的话,调用 javascript 引擎解释并执行。
7、javascript 代码可能会修改 dom 树的结构。
8、如果节点需要依赖其他资源,例如图片、css、视频等,调用资源加载器来加载它们,但是它们是异步的,不会阻碍当前 dom 树的继续创建;如果是 javascript 资源 url (没有标记异步),则需要停止当前 dom 树的创建,直到 javascript 的资源加载并被 javascript 引擎执行后才继续 dom 树的创建。
在上述的过程中,网页的加载和渲染过程种会发出“DOMConent”事件和 dom 的“onload” 事件,分别发生在 dom 树构建完之后,以及 dom 树建完并且网页所依赖的资源都加载完之后发生,因为某些资源的加载并不会阻碍 dom 树的创建,所以这两个事件多数时候不是同时发生的。

二 CSS 文件的解析

接下来是 webkit 利用 css 和 dom 树构建 RenderObject 树直到绘图上下文。
这一阶段的具体过程如下。
1、css 文件被 css 解释器解释成内部表示结构。
2、css 解释器工作完成之后,在 dom 树上附加解释后的样式信息,这就是 RenderObjcet 树。
3、RenderObjcet 节点在创建的同时,webkit 会根据网页的层次结构创建 RenderLayer 树,同时构建一个虚拟的绘图上下文。
如下图所示:
从CSS和DOM树到绘图上下文
从CSS和DOM树到绘图上下文
RenderObjcet 树的建立并不表示 dom 树会被销毁,事实上,上述图中的四个内部表示结构一直存在,直到网页被销毁,因为它们对于网页的渲染起了非常大的作用。

三 生成最终绘制的图像

最后就是根据绘图上下文来生成最终的图像,这一过程主要依赖 2D 和 3D 图形图,如下图:
从绘图上下文到最终的图像
从绘图上下文到最终的图像
图中这一阶段对应的具体过程如下:
1、绘制上下文是一个与平台无关的抽象类,它将每个绘图操作桥接到不同的具体实现类,也就是绘图具体实现类。
2、绘图实现类也可以有简单的实现,也可能有复杂的实现。
3、绘图实现类将 2D 图形库或者 3D 图形库绘制的结果保存下来,交给浏览器来同浏览器界面一起显示。
这一过程实际上可能不像图中描述的那么简单,现代浏览器为了绘图上的高效性和安全性,可能会在这一过程中引入复杂的机制。而且,绘图也从之前单纯的软件渲染,到现在的 GPU 硬件渲染,混合渲染模型等方式。
上面介绍的是一个完整的渲染过程。现代网页很多是动态网页,这意味着在渲染完成之后,由于网页的动画或者用户的交互,浏览器其实一直在不停地重复执行渲染过程。
从以上内容可以得出为什么页面在引入 js 的时候最好是放在 body 的最后,而引入 css 的时候却无任何要求。因为 css 在解析时不会修改 dom 树的结构,所以完全可以和 html 的解析同时执行,但是 js 的解释执行却会修改 dom 树的结构,所以 js 的解释执行和 html 的解释执行是阻塞进行的。为了加快 html 页面的显示,最好将 js 的引入放在 body 的最后。

四 参考资料

  • 《webkit技术内幕》
扫码关注有惊喜

(转载本站文章请注明作者和出处 qbian)

暂无评论

Copyright 2016 qbian. All Rights Reserved.

文章目录