01
2013
04

浏览器工作原理 - 浏览器渲染引擎

浏览器的层结构看,我们看到浏览器渲染引擎是整个层级最直接我们web开发人员研究的一块。渲染,意思就是将请求的内容显示到页面上来。

        默认的渲染引起你给能够显示HTMLXML和图片。如果他要显示其他内容,就需要浏览器的扩展插件, 例如PDF,需要PDFviewer插件,当然Webkit就自带PDF插件。我们将讨论这些插件和扩展的一些特殊部分,这里我们将集中于这部分主要的应用案例――使用CSS来格式化显示HTML和图片。


各种渲染引擎

我们提到的Firefox, Safari两种浏览器构建于两种渲染引擎之上:Firefox使用Gecko—— Mozilla自家的渲染引擎;Safari Chrome 都使用Webkit

Webkit是一个开源的渲染引擎,它源自Linux平台上的一个引擎,经过Apple公司的修改可以支持MacWindows平台。更多信息可以参考:http://webkit.org/


主要流程

渲染引擎开始于从网络层获取请求内容,一般是不超过8K的数据块。接下来就是渲染引擎的基本工作流程:


flow.png

渲染引擎的基本工作流程

(解析HTML构建DOM树,渲染树构建,渲染树布局,绘制渲染树)


渲染引擎会解析HTML文档并把标签转换成DOM节点到一个树中(这里我们称这个树为内容树)。它会解析style元素和外部文件中的样式数据。样式数据和HTML中的显示控制将共同用来创建另一棵树——渲染树。

渲染树包含带有颜色,尺寸等显示属性的矩形。这些矩形的顺序与显示顺序一致。

渲染树构建完后就开始参与布局处理,这里的意思就是确定每个节点一个在屏幕上的精确显示位置。接下来的阶段是绘制 —— 遍历渲染树并用UI后端层将每一个节点绘制出来。

一定要理解这是一个缓慢的过程,为了更好的用户体验,渲染引擎会尝试尽快的把内容显示出来。它不会等到所有HTML都被解析完才创建并布局渲染树。它会在处理后续内容的同时把处理过的局部内容先展示出来。

主要流程样例图

webkitflow.png

Webkit主要流程图


image008.jpg

Mozilla’s Gecko渲染引擎主要流程图

从图我们可以看到尽管WebkitGecko使用的术语稍微不同,但整个流程基本上是一样的。

Gecko里把格式化好的可视元素称做帧树Frametree)。每个元素就是一个帧(frame)。 Webkit 则使用渲染树这个术语,渲染树由渲染对象组成。对与元素的布局,在Webkit中使用“layout”这一术语,Gecko则称为“Reflow”“Attachment”Webkit术语,它用来连接DOM节点与可视化信息以构建渲染树。一个非语义上的小差别是GeckoHTMLDOM树之间有一个附加的层,称作“contentsink”,是创建Dom对象的工厂。

本文到此了,后面继续分享流程图的每一部分。


« 上一篇下一篇 »

评论列表:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。