浏览器渲染过程

浏览器渲染引擎工作流程都差不多，大致分为 5 步，创建 DOM 树——创建 StyleRules——创建 Render 树——布局Layout（重排）——绘制 Painting（重绘）

用 HTML 分析器，分析 HTML 元素，构建一颗 DOM 树(标记化和树构建)。

1. 用 HTML 分析器，分析 HTML 元素，构建一颗 DOM 树(标记化和树构建)，渐进式，边分析边构建。

2. 用 CSS 分析器，分析 CSS 文件和元素上的 inline 样式，生成页面的样式表。

3. 将 DOM 树 和样式表，关联起来，构建一颗 Render 树 (这一过程又称为 Attachment)。每个 DOM 节点都有attach 方法，接受样式信息，返回一个render对象(又名renderer)。这些 render 对象最终会被构建成一颗 Render 树。 此三个过程并非完全独立，一边加载，一边解析，一边渲染。

4. 有了 Render 树，浏览器开始布局，为每个 Render 树上的节点确定一个在显示屏上出现的精确坐标。

5. Render 树和节点显示坐标都有了，就调用每个节点 paint 方法，把它们绘制出来。