解析 HTML 标签, 构建 DOM 树
渲染引擎开始解析HTML文档，转换树中的html标签或js生成的标签到DOM节点，它被称为-内容树。解析 CSS 标签, 构建 CSSOM 树
解析CSS（包括外部CSS文件和样式元素以及js生成的样式），根据CSS选择器计算出节点的样式，创建另一个树-渲染树。把 DOM 和 CSSOM 组合成 渲染树 (render tree)
在渲染树的基础上进行布局, 计算每个节点的几何结构
从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标。把每个节点绘制到屏幕上 (painting)
遍历渲染树，每个节点将使用UI后端层来绘制。
图片.png
浏览器的工作原理,可参考:
http://taligarsiel.com/Projects/howbrowserswork1.htm
关于 Repaint 和 Reflow
对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为Reflow(回流)；
当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为Repaint(重绘)。
参考:
Rendering: repaint, reflow/relayout, restyle:
http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
Repaint 、Reflow 的基本认识和优化:
https://segmentfault.com/a/1190000002629708
