渲染树构建、布局及绘制

from:https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=zh-cn

• DOM 树与 CSSOM 树融合成渲染树。
• 渲染树只包括渲染页面需要的节点。
• 布局计算每个对象的精确位置及尺寸。
• 最后一步的绘制，输入确定的渲染树，在屏幕上渲染像素。

构建渲染树

为了构建渲染树，浏览器大致做了如下：

• 从 DOM 树的根节点开始，遍历每个可见的节点。
• 某些节点完全不可见（例如 script 标签、meta 标签等），因为它们不会在渲染结果中反映，所以会被忽略。
• 某些节点通过 CSS 隐藏，因此在渲染树中也会被忽略。比方说，上面例子中的 span 节点，因为该节点有一条显式规则设置了 display:none 属性，所以不会出现在渲染树中。
• 给每个可见节点找到相应匹配的 CSSOM 规则，并应用这些规则。
• 发射可见节点，连带其内容及计算的样式。

布局过程输出一个「盒模型」，它精确捕获每个元素在视口中的准确位置及尺寸：所有相对度量单位都被转换为屏幕上的绝对像素位置

上述每一步都需要浏览器完成大量的工作，这也意味着它通常很耗时。所幸，Chrome DevTools 可以帮助我们深入了解上述三个阶段。

布局阶段

• Timeline 中，”Layout” 事件捕获渲染树的构建及位置、尺寸的计算。
• 一旦布局完成，浏览器便发布 ‘Paint Setup’ 与 ‘Paint’ 事件，将渲染树转化为屏幕上的实际像素。

渲染树的构建、布局与绘制所需的时间取决于文档大小、应用的样式，当然，还有运行文档的设备：文档越大，浏览器要完成的工作就越多；样式越复杂，绘制需要的时间就越长（例如，绘制单色成本较低，而 计算、呈现阴影 的成本就非常高了）。

浏览器执行的所有步骤

让我们快速回顾一下浏览器执行的所有步骤：

• 处理 HTML 标记，构建 DOM 树。
• 处理 CSS 标记，构建 CSSOM 树。
• 将 DOM 树和 CSSOM 树融合成渲染树。
• 根据渲染树来布局，计算每个节点的几何信息。
• 在屏幕上绘制各个节点。

我们的演示页面看起来也许很简单，但也需要完成大量工作。您觉得如果修改了 DOM 或 CSSOM，会怎样呢？我们将不得不重复上述所有步骤，以确定需要在屏幕上重新渲染的像素。

优化关键渲染路径 即尽可能地缩短上述第 1 步到第 5 步耗费的总时间。 这样，我们可以在屏幕上尽可能快地渲染内容，还可以缩短首次渲染后屏幕刷新之间的时间总量 - 也就是说，交互的内容可以有更高的刷新率。