一、今天完成的事情

完成小课堂：浏览器如何渲染页面

二、明天计划的事情

解决剩下的bug。

三、遇到的问题

浏览器如何渲染页面？

3.1浏览器工作大流程

先看图

1）浏览器会解析三个东西：

一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。

CSS，解析CSS会产生CSS规则树。

Javascript，脚本，主要是通过DOM API(Application Programming Interface)和CSSOM(CSS对象模型) API来操作DOM Tree和CSS Rule Tree.

2）解析完成后，浏览器引擎会通过DOM Tree和CSS Rule Tree来构造Rendering Tree。注意：

Rendering Tree渲染树并不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了。CSS的Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。然后，计算每个Frame（也就是每个Element）的位置，这又叫layout和reflow过程。

3）最后通过调用操作系统Native GUI的API绘制。

3.2 DOM解析

上面这段HTML会解析成这样：

下面是另一个有SVG标签的情况：

3.3 CSS解析

CSS的解析大概是下面这个样子（下面主要说的是Firefox的玩法），假设我们有下面的HTML文档：

于是DOM Tree是这个样子

然后我们的CSS文档是这样的：

/* rule 1 */ doc { display: block; text-indent: 1em; }

/* rule 2 */ title { display: block; font-size: 3em; }

/* rule 3 */ para { display: block; }

/* rule 4 */ [class="emph"] { font-style: italic; }

于是我们的CSS Rule Tree会是这个样子：

注意：CSS匹配HTML元素是一个相当复杂和有性能问题的事情。所以，你就会在N多地方看到很多人都告诉你，DOM树要小，CSS尽量用id和class，千万不要过渡层叠下去，……

通过这两个树，我们可以得到一个叫Style Context Tree，也就是下面这样（把CSS Rule结点Attach到DOM Tree上）：

所以，Firefox基本上来说是通过CSS解析 生成CSS Rule Tree，然后，通过比对DOM生成Style Context Tree，然后Firefox通过把Style Context Tree和其Render Tree（Frame Tree）关联上，就完成了。注意：Render Tree会把一些不可见的结点去除掉。而Firefox中所谓的Frame就是一个DOM结点，不要被其名字所迷惑了。

3.4渲染

渲染的流程基本上如下（黄色的四个步骤）：

1)计算CSS样式；2)构建Render Tree；3)Layout –定位坐标和大小，是否换行，各种position, overflow, z-index属性……；4)正式开画；

注意：上图流程中有很多连接线，这表示了Javascript动态修改了DOM属性或是CSS属会导致重新Layout，有些改变不会，就是那些指到天上的箭头，比如，修改后的CSS rule没有被匹配到，等。

四、收获

学习浏览器渲染页面的原理