复述一下浏览器呈现引擎的基本工作流

前面小节我们介绍了浏览器呈现引擎的主流程，并给出流程图。



因为这个过程很重要，这里再对这个流程复述一次：

1. 解析HTML构建DOM树：

这里解析三个东西：HTML/SVG/XHTML，CSS及javascript。解析CSS会产生CSS规则树，解析javascript主要是通过DOM API和CSSOM API来操作DOM Tree和CSS。

2. Rule Tree渲染树构建：

解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。不过，Rendering Tree 渲染树并不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了。CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。

3. 渲染树布局：

计算每个element确切的显示位置，也就是layout和reflow的过程。

4. 绘制渲染树：

通过调用操作系统Native GUI的API绘制将每一个节点绘制出来。

看起来步骤繁琐，但是为了更好的用户体验，浏览器会尽可能快的把内容显示出来，并不会等到所有的HTML解析完后才创建并布局渲染树，它会在处理后续内容的同时把处理过的局部内容先展示出来。

一些题外话：关于现在的渲染引擎

Firefox, Safari两种浏览器构建于两种渲染引擎之上：Firefox使用Gecko —— Mozilla自家的渲染引擎；Safari 和 Chrome 都使用 Webkit，而Chrome现在从开源的Webkit上分叉出自己的开源浏览器引擎Blink，Opera宣布跟随Google Chrome的脚步，将弃用自家的Presto引擎，支持Blink引擎，而IE使用的是Trident内核。不过众多国内主流浏览器使用的双引擎一般都是Webkit和Trident两种内核。