HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1203|回复: 0

[文章] 渲染树的构建,布局和绘制(翻译自谷歌Web开发最佳实践...

[复制链接]

该用户从未签到

发表于 2015-12-23 22:43:40 | 显示全部楼层 |阅读模式
本帖最后由 执剑为何 于 2015-12-29 12:42 编辑

CSSOM树和DOM树组合生成渲染树,渲染树将决定每一个可见元素的计算样式,并作为输入交给绘制线程,绘制线程将会把他们渲染成像素打到屏幕上。优化这些步骤将是提升渲染性能的关键所在。
上一章节介绍了如何构建对象模型。我们从HTML和CSS构建出了DOM树和CSSOM树。但是,他们描述的是文档的不同方面:DOM树描述的是页面内容,而CSSOM树则描述的是需要被使用到页面内容上的样式规则,由此可见,他们是相互独立的数据结构。那么我们应当如何去合并这两棵树来让浏览器渲染像素到屏幕呢?
长话短说
  • DOM树和CSSOM树结合组成了渲染树
  • 渲染树(Render tree)只会包含需要绘制到页面上的节点
  • 布局(Layout)会计算出每一个对象的具体位置和大小
  • 绘制(Paint)是最后异步,将会将渲染树渲染成像素,显示到屏幕上
构建渲染树
浏览器首先需要结合DOM树和CSSOM树到渲染树,渲染树获取所有页面上可见的DOM内容,再吧CSSOM中的样式信息附着到每一个节点上
为了构建渲染树,浏览器所做的工作大致如下:
  • 从DOM树的根节点开始,遍历每个可见的节点
    • 有些节点本身不可见(比如script、meta等等)
    • 有些节点被CSS隐藏了,这些节点也会被渲染树忽略
  • 对于每一个可见节点,会从CSSOM中找并应用到其对应的样式信息
  • 提交可见的节点和他们的内容和样式
需要注意的是,visibility:hiddendisplay:none是不同的。前者会将元素隐藏,但元素依旧在页面中占据空间(会被绘制成空的盒子),所以需要递交给布局阶段进行处理。而后者会从渲染树中移除元素及所有子元素,他们不会被递交给布局阶段
这个阶段完毕后,会生成一个包含所有可见节点的内容和样式信息的渲染树。接下来可以进行布局阶段了
布局阶段
目前为止,我们已经获取了可见节点的计算样式,但我们还没有计算元素在设备视口中的最终的位置和尺寸——计算这些就是布局阶段的工作,它还有另外一个我们熟知的名称:回流(reflow)
为了计算每个节点的最终位置和尺寸,需要从根节点开始遍历渲染树,计算渲染树中每个对象在页面上的几何图形。比如如下例子:
  1. <html>
  2.     <head>
  3.         <meta name="viewport" content="width=device-width,initial-scale=1.0">
  4.         <title>Critial Path: Hello world!</title>
  5.     </head>
  6.   <body>
  7.     <div style="width: 50%">
  8.         <div style="width: 50%">Hello world!</div>
  9.     </div>
  10.   </body>
  11. </html>
复制代码
上面的页面的body元素包含两个嵌套的div,第一个div(父元素)其节点的宽度为视口宽度的50%,第二个div在第一个div之中,宽度是第一个元素的50%,也就是视口宽的的50%。
布局阶段输出的是一个盒子模型,它精确地描述了元素在视口中的确切位置和尺寸:所有相对单位都会被转变为屏幕上的绝对像素值,等等
现在我们知道了哪些元素可见,他们的计算样式,以及他们的几何图形,我们终于能够将这些信息传递给最终阶段。这个阶段将渲染树中的每个节点绘制成屏幕上像素。通常这个阶段叫做绘制阶段(painting)或是光栅化(rasterizing)
绘制阶段
这里面每个步骤都需要浏览器惊醒一定量的工作,也就说会花费一定的时间。我们可以通过Chrome开发者工具看我们上面所说到的三个阶段。
  • Timeline中的Layout事件包含渲染树的构建阶段和位置尺寸的计算阶段
  • 一旦布局阶段完成,浏览器会开启“Paint Setup”和“Paint”事件,用来将渲染树转变成屏幕上的像素
上面所说的渲染树构建、布局阶段、绘制阶段所需要的事件会根据文档的大小、样式的多少、设备的配置有关。文档越大,浏览器需要做更多的工作。样式越复杂,浏览器需要考虑更多的绘制(绘制一个固定颜色代价很低,但绘制一个阴影代价很大)。
这些都完成后,我们的页面终于展示在视口里了
总结
我们来重温一下所有的步骤:
  • 处理HTML标记,构建DOM树
  • 处理CSS标记,构建CSSOM树
  • 合并DOM树和CSSOM树,构建渲染树
  • 在渲染树上运行布局阶段,计算每个可见节点的几何图形
  • 绘制每个独立的节点到屏幕上
考虑如果DOM或CSSOM发生改变时,会发生些什么?我们需要重复这些工作来确定如何回执到屏幕上
优化渲染的关键就是减少这5步所花费的时间。减少这5步所花费的事件能够让页面尽可能快的展示到页面上。在首次页面渲染之后,每次更新后的渲染效率也会提高。
作者:天镶

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-2-23 01:41

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表