浏览器工作原理之基本渲染流程

渲染引擎一开始会从网络层获取请求文档的内容。下图是文档内容获取之后，渲染引擎的基本流程：



1） 渲染引擎把HTML文档解析成DOM树，把标签转换成DOM节点。

2） Gecko（Firefox）：在解析HTML文档的同时，渲染引擎会把文档内的样式和外部CSS文件解析成CSS规则树。而Webkit不会生成CSS规则树。

3） 渲染器是在文档解析和创建DOM节点后创建的，会计算DOM节点的样式信息。如果元素的display属性被设置成了none，或者如果元素的子孙继承了display:none，该元素的渲染器不会被创建。节点的子类和display属性一起决定为该节点创建什么样的渲染器。渲染器是渲染树的节点。

Gecko（Firefox）：DOM树和CSS规则树结合之后，形成了Style Content Tree。将Style Content Tree和渲染树关联，就完成了渲染树。

渲染树包含多个视觉属性（如颜色和尺寸），属性的排列顺序是在屏幕上显示的顺序。

4） 渲染树构建出来之后，就进入布局阶段，为渲染树的每个节点分配一个屏幕上的确切坐标。

5） 最后一步，就是遍历渲染树，通过用户界面后端(UI Backend)将每个节点绘制出来。

注：这是一个渐进的过程。渲染引擎不会等到整个HTML文档解析完成之后，才开始构建渲染树和确定布局。在不断接收和处理网络层的请求内容时，渲染引擎会将部分内容解析并显示出来。

【参考资料】

http://coolshell.cn/articles/9666.html

http://taligarsiel.com/Projects/howbrowserswork1.htm

http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#The_browsers_we_will_talk_about