渲染树构建、布局及绘制

男娘i 2022-07-12 10:37 212阅读 0赞

from:[https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=zh-cn][https_developers.google.com_web_fundamentals_performance_critical-rendering-path_render-tree-construction_hl_zh-cn]

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

![这里写图片描述][render-tree-construction.png_hl_zh-cn]

## 构建渲染树 ##

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

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

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

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

![这里写图片描述][layout-timeline.png_hl_zh-cn]

## 布局阶段 ##

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

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

## 浏览器执行的所有步骤 ##

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

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

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

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

[https_developers.google.com_web_fundamentals_performance_critical-rendering-path_render-tree-construction_hl_zh-cn]: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=zh-cn
[render-tree-construction.png_hl_zh-cn]: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/images/render-tree-construction.png?hl=zh-cn
[layout-timeline.png_hl_zh-cn]: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/images/layout-timeline.png?hl=zh-cn