渲染树render tree

「爱情、让人受尽委屈。」 2022-06-13 13:38 252阅读 0赞

CSSOM树和DOM树连接在一起形成一个render tree，渲染树用来计算可见元素的布局并且作为将像素渲染到屏幕上的过程的输入。

*  DOM树和CSSOM树连接在一起形成render tree .
 *  render tree只包含了用于渲染页面的节点
 *  布局计算了每一个对象的准确的位置以及大小
 *  绘画是最后一步，绘画要求利用render tree来将像素显示到屏幕上![render-tree-construction.png_5456182][]

第一步是结合DOM树和CSSOM树形成“render tree”，渲染树用来描述所有可见的DOM内容，并且将CSSOM样式信息附加到节点上。

为了形成渲染树，浏览器大致做的事情有:

1.  从DOM树根节点开始，遍历每一个可见的节点
    
     *  一些节点是完全不可见的（比如 script标签，meta标签等），这些节点会被忽略，因为他们不会影响渲染的输出
     *  一些节点是通过CSS样式隐藏了，这些节点同样被忽略——例如上例中的span节点在render tree中被忽略，因为span样式是display:none;
2.  对每一个可见的节点，找到合适的匹配的CSSOM规则，并且应用样式
3.  显示可见节点（节点包括内容和被计算的样式）

### 记住 ###

*  记住“visibility:hidden”和“display：none”之间的不同，“visibility:hidden”将元素设置为不可见，但是同样在布局上占领一定空间（例如，它会被渲染成为空盒子），但是“display:none”的元素是将节点从整个render tree中移除，所以不是布局中的一部分 。

最后输出的是一个render包括了屏幕上可见内容的样式信息和内容信息。

我们知道了哪些元素应该被显示以及元素的样式，但是我们还没有计算元素在设备中的确切的位置和大小——这是“布局”阶段，同样也被叫做“reflow”。

![复制代码][copycode.gif]

<html>
      <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Critial Path: Hello world!</title>
      </head>
      <body>
        <div style="width: 50%">
          <div style="width: 50%">Hello world!</div>
        </div>
      </body>
    </html>

![复制代码][copycode.gif]

![layout-viewport.png_5456182][]

上面的页面展示了两个div：第一个div是整个视图的一半，第二个div是父亲宽度的一半——也就是说是整个视图的25%。

布局的输出是“盒子模型”，并且将相对定位转化成屏幕上的绝对像素。

最后，我们只差将render tree上的所有节点转化成屏幕上的确切像素——这个步骤通常被称为“painting”或者“rasterizing”。

每个步骤都要花费一些时间，谷歌浏览器开封工具为我们描述了一些步骤所花费的时间：

*  构造render tree和计算位置以及大小信息被捕捉在时间轴上的“Layout”时间中
 *  一旦布局完成，浏览器计算"Paint Setup"和“Paint”事件用来描述render tree转化成屏幕上世纪像素的时间。

显示构造render tree以及布局和paint的时间受到页面的大小，被应用的样式和正在运行的设备影响。

页面越大，浏览器将要做更多工作；样式越复杂，painting阶段所花费的时间也越多。

但是，我们的页面完成了！WOOOO！

让我们快速的浏览下浏览器所做的事情：

1.  处理HTML标签建立DOM树
2.  处理CSS标签建立CSSOM树
3.  连接CSSOM树和DOM树形成一个render树
4.  在render树上运行布局来计算每个节点的形状
5.  在屏幕上画每一个节点

虽然我们的页面很简单，但是它进行了大量的工作！下一章我们讨论怎样对渲染进行优化。

原文：[https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=en][https_developers.google.com_web_fundamentals_performance_critical-rendering-path_render-tree-construction_hl_en]

[render-tree-construction.png_5456182]: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/images/render-tree-construction.png?_=5456182
[copycode.gif]: /images/20220613/5a31cd5151464b2db315fcfeec4d5113.png
[layout-viewport.png_5456182]: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/images/layout-viewport.png?_=5456182
[https_developers.google.com_web_fundamentals_performance_critical-rendering-path_render-tree-construction_hl_en]: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=en