[摘录]How browsers work之页面渲染流程

     在研究浏览器是如何渲染页面时，意外发现了国外一篇讲解浏览器工作原理的文章，更幸运的是国内的“携程设计委员会”已经将该文章的一部分翻译成中文，但让人郁闷的是该委员会并没有把这篇文章完整翻译完成，而且也没有要翻译完的迹象。     这篇文章把浏览器工作原理讲解的非常透彻，所以本文摘录了其中的一部分内容，以对浏览器工作原理及渲染页面流程有个大体印象，更多内容请移步上述英文或中文文章。

《How browsers work》的英文原文地址：
http://taligarsiel.com/Projects/howbrowserswork1.htm

中文翻译第1章的地址：
http://ued.ctrip.com/blog/how-browsers-work-i-basic-knowledge.html

中文翻译第2章的地址（未完整翻译完第2章）：
http://ued.ctrip.com/blog/how-browsers-work-rendering-engine-html-parsing-series-ii.html

      首先给出这篇英文文档的目录结构，了解一下这篇文档所讲述的内容

一 简介

1.1 浏览器的主要功能

浏览器的主要功能是展示用户选中的网络资源，即通过请求服务器并显示在浏览器窗口中的网络资源。资源的格式一般是HTML，但也有PDF、图片等其它格式。资源的定位由URL来实现。

      浏览器解释与展现HTML文件的方式是由HTML与CSS规范指定的，这些规范是由 W3C (World Wide Web Consortium) Web标准化组织来维护。

1.2 浏览器的上层架构

      浏览器的主要组件如下图:

图1 浏览器的主要组件

      用户接口 – 包括地址栏，前进后退，书签菜单等窗口上除了网页显示区域以外的所有部分。

      浏览器引擎 – 查询与操作渲染引擎的接口。

      渲染引擎 – 负责显示请求的内容。比如请求到HTML, 它会负责解析HTML 与 CSS 并将结果显示到窗口中。

      网络 – 用于网络请求, 如HTTP请求。它包括平台无关的接口和各平台独立的实现。

      UI后端 – 绘制基础元件，如组合框与窗口。它提供与平台无关的通用接口，其内部使用了操作系统UI的相应实现。

      JavaScript解释器。用于解析执行JavaScript代码。

      数据存储。这是一个持久层。浏览器需要把所有数据存到硬盘上，如cookies。新的HTML规范 (HTML5) 规定了一个完整（虽然轻量级）的浏览器中的数据库：’web database’。

注意：与其它浏览器不同，chrome使用多个渲染引擎实例，每个Tab一个，每个Tab都是一个独立进程。

二 渲染引擎

渲染引擎的作用就是渲染，即把请求到的内容显示在浏览器屏幕上

      默认情况下渲染引擎可以显示HTML、XML文档以及图片。 通过插件（浏览器扩展）它可以显示其它类型文档。比如使用PDF viewer插件显示PDF文件。我们会在专门的一个章节里讨论插件与扩展。本节我们将关注渲染引擎的主要用途——显示用CSS格式化的HTML与图片。

2.1 各种渲染引擎

      上文提到的Firefox, Chrome和Safari浏览器都是构建在两种渲染引擎之上：Firefox使用Gecko —— Mozilla自家的渲染引擎；Safari 和 Chrome 都使用 Webkit。如下图：

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

2.2 渲染引擎的主要流程

      当渲染引擎获取到来自于网络层请求的文档内容时(这个内容一般是不超过8Ｋ的数据块)，它开始工作。

      接下来就是渲染引擎的基本工作流程，如图2：

图 2：渲染引擎的基本工作流程(解析HTML文档以创/构建DOM树，渲染树结构，渲染树布局，绘制渲染树)

      1、渲染引擎会解析HTML文档,把html标签转换成”内容树”(即DOM树。译者注)中的DOM节点。渲染引擎也会解析style标签和外部CSS文件中的CSS样式数据。

      2、CSS样式数据会和HTML的显示标签一起,被用于创建出另一棵树——渲染树。渲染树包含带有显示属性(如颜色、尺寸等)的矩形。这些矩形会在屏幕上以正确的顺序显示。

      3、渲染树构建完成后就是”布局“处理阶段，也就是给出每个node(节点)在屏幕上准确的显示位置的坐标。

      4、下一个步骤是 绘制 —— 遍历渲染树并用UI后端层将每一个节点绘制出来。

      一定要理解这是一个缓慢的过程：

      为了更好的用户体验，渲染引擎会尝试尽快的把内容显示出来。
      它不会等到所有HTML都被解析完才开始创建并布局渲染树。
      它会在处理后续来源于网络的内容的同时，解析并展示已处理过的部分内容。

2.3 主要流程示例

图 3：Webkit渲染引擎主要流程

图 4：Mozilla的Gecko渲染引擎主要流程

      从图3和图4中可以看出，尽管Webkit与Gecko使用略微不同的术语，这个过程还是基本相同的。

      Gecko 里把格式化好的可视元素称做“帧树”（Frame tree）。每个元素就是一个帧（frame）。 Webkit 则使用”渲染树”这个术语，渲染树由”渲染对象”组成。

      Webkit 里使用”layout”表示元素的布局，Gecko则称为”Reflow”。Webkit使用”Attachment”来连接DOM节点与可视化信息以构建渲染树。

      一个非语义上的小差别是Gecko在HTMK与DOM树之间有一个附加的层 ，称作”content sink”，是创建DOM对象的工厂。

      接下来，我们会讨论流程中的每一部分：

请移步如下地址查阅后续内容：

http://ued.ctrip.com/blog/how-browsers-work-rendering-engine-html-parsing-series-ii.html (中文翻译)
或
http://taligarsiel.com/Projects/howbrowserswork1.htm （英文原文）

链接

W3C中文网：http://www.chinaw3c.org/
W3C官网：https://www.w3.org/
W3C发布的HTML5标准规范：https://www.w3.org/TR/html5/