浏览器的渲染机制

浏览器的渲染、布局与绘制步骤：

1.解析HTML并构建DOM树；
2.解析CSS并构建CSSOM树；
3.DOM和CSSOM合并为渲染树（render tree）；
4.在渲染树的基础上进行布局，计算每个节点的几何位置；
5.将每个节点绘制到屏幕上；

渲染树构建（Render-tree Construction）

render-tree-construction.png

渲染树捕捉DOM里所有可见节点以及CSSOM里这些节点对应的所有样式信息。
构建渲染树的过程：
1.从DOM树的头结点开始，遍历每个可见节点；
不可见节点（比如script标签、元标签等）会被忽略
display: none;是不可见节点，而 visibility: hidden;是可见节点
2.对于每个节点，寻找匹配的CSSOM规则；
3.对节点填充内容并计算样式；

布局（Layout）

布局的输出是一个盒模型，盒模型的精准的描述了每个元素在视口中的具体位置和尺寸。在布局过程中，所有相对测量都会被转换为屏幕上的绝对像素数值。

绘制（Paint）

绘制过程就是将渲染树的每个节点以及其布局阶段计算出的几何结构转换为屏幕上实际的像素。