关于重绘、重排和回流

1.浏览器的渲染机制

1.1浏览器的运行机制

• 构建DOM树（parse）：渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node，包括js生成的标签，生成内容树（Content Tree/DOM Tree）
• 构建渲染树（construct）：解析对应的CSS样式文件信息，包括js生成的样式和外部css文件，而这些文件信息以及HTML中可见的指令，构建渲染树（Rendering Tree/Frame Tree）；
• 布局渲染树（reflow/layout）：从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点所应该在屏幕上出现的精确坐标；
• 绘制渲染树（paint/repaint）：遍历渲染树，使用UI后端层来绘制每个节点。

1.2渲染引擎工作原理

1.3 WebKit工作原理