WebKit技术内幕(第二章读书笔记)

104 阅读2分钟

网页构成

“frameset”、“frame”和“iframe”可以用来在当前网页中嵌入新的框结构。
对于需要复杂变换和处理的元素,浏览器会为他们创建新层,比如video, canvas等

WebKit的网页渲染过程

据数据的流向,这里将渲染过程分成三个阶段。
第一个阶段是从网页的URL到构建完DOM树。
第二个阶段是从DOM树到构建完WebKit的绘图上下文。
第三个阶段是从绘图上下文到生成最终的图像。

第一个阶段

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树的创建,

捕获.PNG

第二阶段

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

第三个阶段

1.绘图上下文是一个与平台无关的抽象类,它将每个绘图操作桥接到不同的具体实现类,也就是绘图具体实现类。 2.绘图实现类将2D图形库或者3D图形库绘制的结果保存下来,交给浏览器来同浏览器界面一起显示。

捕获.PNG