浏览器是怎样工作的：渲染引擎，HTML解析（连载二） �C 携程设计委员会
渲染引擎
渲染引擎的职责是……渲染，也就是把请求的内容显示到浏览器屏幕上。
默认情况下渲染引擎可以显示HTML，XML文档以及图片。 通过插件（浏览器扩展）它可以显示其它类型文档。比如使用PDF viewer插件显示PDF文件。我们会在一个专门的章节讨论插件与扩展。在这一节我们将专注渲染引擎的主要用途――显示用CSS格式化的HTML与图片。
各种渲染引擎
我们提到的Firefox, Safari两种浏览器构建于两种渲染引擎之上：Firefox使用Gecko ―― Mozilla自家的渲染引擎；Safari 和 Chrome 都使用 Webkit。
Webkit 是一个开源的渲染引擎，它源自Linux平台上的一个引擎，经过Apple公司的修改可以支持Mac与Windows平台。更多信息可以参考： http://webkit.org/ 。
主要流程
渲染引擎开始于从网络层获取请求内容，一般是不超过8Ｋ的数据块。接下来就是渲染引擎的基本工作流程：
渲染引擎会解析ＨＴＭＬ文档并把标签转换成内容树中的ＤＯＭ节点。它会解析style元素和外部文件中的样式数据。样式数据和ＨＴＭＬ中的显示控制将共同用来创建另一棵树――渲染树。
渲染树包含带有颜色，尺寸等显示属性的矩形。这些矩形的顺序与显示顺序一致。
渲染树构建完成后就是"布局"处理，也就是确定每个节点在屏幕上的确切显示位置。 下一个步骤是 绘制 ―― 遍历渲染树并用ＵＩ后端层将每一个节点绘制出来。
一定要理解这是一个缓慢的过程，为了更好的用户体验，渲染引擎会尝试尽快的把内容显示出来。它不会等到所有ＨＴＭＬ都被解析完才创建并布局渲染树。它会 在处理后续内容的同时把处理过的局部内容先展示出来。
主要流程示例
图 3：Webkit主要流程
从图3和图4中可以看出，尽管Webkit与Gecko使用略微不同的术语，这个过程还是基本相同的。
Gecko 里把格式化好的可视元素称做"帧树"（Frame tree）。每个元素就是一个帧（frame）。 Webkit 则使用"渲染树"这个术语，渲染树由"渲染对象"组成。Webkit 里使用"layout"表示元素的布局，Gecko则称为"Reflow"。Webkit使用"Attachment"来连接DOM节点与可视化信息以构建渲染树。一个非语义上的小差别是Gecko在ＨＴＭＬ与ＤＯＭ树之间有一个附加的层 ，称作"content sink"，是创建ＤＯＭ对象的工厂。我们会讨论流程中的每一部分。
Read full article from 浏览器是怎样工作的：渲染引擎，HTML解析（连载二） �C 携程设计委员会
No comments:
Post a Comment