页面解析
1. 概述
以webkit为例，我们来看看html文件是如何一步步被解析渲染成网页的。
可以看到一个大致的过程是
- HTML代码转化为DOM
- CSS代码转化成CSSOM（CSS Object Model）
- 结合DOM和CSSOM，生成一棵渲染树（包含每个节点的视觉信息）
- 生成布局（layout），所有渲染树的所有节点进行平面合成
- 将布局绘制（paint）在屏幕上。
在这五步里面，第一步到第三部都非常快，第四步和第五步很耗时。
其他的渲染引擎的处理过程也是类似的，不过可能术语不同。例如Webkit使用的术语布局(layout)跟Gecko的重排(reflow)是同一个意思。