渲染树render tree

时间 2019-12-18

标签渲染 rendertree 繁體版

原文原文链接

CSSOM树和DOM树链接在一块儿造成一个render tree，渲染树用来计算可见元素的布局而且做为将像素渲染到屏幕上的过程的输入。html

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

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

为了造成渲染树，浏览器大体作的事情有:浏览器

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

记住

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

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

咱们知道了哪些元素应该被显示以及元素的样式，可是咱们尚未计算元素在设备中的确切的位置和大小——这是“布局”阶段，一样也被叫作“reflow”。布局

 
   <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> 
  

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

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

最后，咱们只差将render tree上的全部节点转化成屏幕上的确切像素——这个步骤一般被称为“painting”或者“rasterizing”。spa

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

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

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

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

可是，咱们的页面完成了！WOOOO！

让咱们快速的浏览下浏览器所作的事情：

处理HTML标签创建DOM树
处理CSS标签创建CSSOM树
链接CSSOM树和DOM树造成一个render树
在render树上运行布局来计算每一个节点的形状
在屏幕上画每个节点

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

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