阅读 76

浏览器的重排与重绘

页面生成的过程

  1. HTML 被 HTML 解析器解析成 DOM 树

  2. CSS 被 CSS 解析器解析成 CSSOM 树

  3. 结合 DOM 树和 CSSOM 树,生成一颗渲染树(Render Tree),这一过程成为 Attachment

  4. 生成布局(Flow),浏览器在屏幕上“画”出渲染树中的所有节点

  5. 将布局绘制(Paint)在屏幕上显示出整个页面

第四步和第五步是最耗时的部分,这两步合起来,就是我们通常所说的渲染。

image.png

渲染

在页面的生命周期中,网页生成的时候,至少会渲染一次。在用户访问的过程中,还会不断的触发重排(Reflow)和重绘(Repaint),不管页面发生了重排和重绘,都会影响性能。

最可怕的是重排,会使我们付出高额的性能代价,要尽量避免。

重排与重绘是什么?

一旦渲染树构建完成,浏览器就开始显示(绘制)页面元素。

当 DOM 的变化影响了元素的几何属性(宽或高),浏览器需要重新计算元素的几何属性,同样其他元素的几何属性和位置也会受到影响。浏览器会使渲染树中受到影响的部分无效,并重新构造渲染树。这个过程成为重排

完成重排后,浏览器会重新绘制受影响的部分到屏幕,该过程称为重绘

由于浏览器的流布局,对渲染树的计算通常只需要遍历一次就可以完成。但table及其内部元素除外,它可能需要多次计算才能确定好其在渲染树中节点的属性,通常要花 3 倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。

重排何时发生?

很显然,每次重排必然会导致重绘,那么,重排会在哪些情况下发生?

  1. 添加或删除可见的 DOM 元素
  2. 元素位置改变
  3. 元素尺寸改变。比如:边距、填充、边框、宽度和高度等
  4. 元素内容改变。比如:一个文本被另一个不同尺寸的图片替代
  5. 页面渲染初始化(这个无法避免)
  6. 浏览器窗口尺寸改变
  7. 改变元素字体大小

这些都是显而易见的,或许你已经有过这样的体会,不间断地改变浏览器窗口大小,导致UI反应迟钝(某些低版本IE下甚至直接挂掉),现在你可能恍然大悟,没错,正是一次次的重排重绘导致的!

image.png

渲染树变化的排队和刷新

思考下面代码:

var ele = document.getElementById('myDiv');
ele.style.borderLeft = '1px';
ele.style.borderRight = '2px';
ele.style.padding = '5px';

复制代码

乍一想,元素的样式改变了三次,每次改变都会引起重排和重绘,所以总共有三次重排重绘过程,但是浏览器并不会这么笨,它会把三次修改“保存”起来(大多数浏览器通过队列化修改并批量执行来优化重排过程),一次完成!但是,有些时候你可能会(经常是不知不觉)强制刷新队列并要求计划任务立即执行。获取布局信息的操作会导致队列刷新,比如:

  1. offsetTop, offsetLeft, offsetWidth, offsetHeight
  2. scrollTop, scrollLeft, scrollWidth, scrollHeight
  3. clientTop, clientLeft, clientWidth, clientHeight
  4. getComputedStyle() (currentStyle in IE)

将上面的代码稍加修改:

var ele = document.getElementById('myDiv');
    ele.style.borderLeft = '1px';
    ele.style.borderRight = '2px';

    // here use offsetHeight
    // ...
    ele.style.padding = '5px';

复制代码

因为 offsetHeight 属性需要返回最新的布局信息,因此浏览器不得不执行渲染队列中的“待处理变化”并触发重排以返回正确的值(即使队列中改变的样式属性和想要获取的属性值并没有什么关系),所以上面的代码,前两次的操作会缓存在渲染队列中待处理,但是一旦 offsetHeight 属性被请求了,队列就会立即执行,所以总共有两次重排与重绘。所以尽量不要在布局信息改变时做查询

常见的引起重绘的属性:

image.png

重排优化建议:

重排的代价是高昂的,会破坏用户体验,并且让 UI 展示变得非常迟缓。通过减少重排的负面影响来提高用户体验的最简单方式就是尽可能的减少重排次数,重排范围。下面是一些有效建议:

减少重排范围

我们应该尽量以布局的形式组织 HTML 结构,尽可能小的影响重排的范围。

  • 尽可能在低层级的 DOM 节点上,而不是像上述全局范围的示例代码一样。如果你想改变 p 标签的样式,class 就不要加在 div 上,通过父元素去影响子元素不好。

  • 不要使用 table 布局,可能很小的一个改动会造成整个 table 的重新布局。

    那么在不得已使用 table 的场合,可以设置 table-layout: auto; 或者说 table-layout: fixed;

    这样可以让 table 一行一行地渲染,这种做法也是为了限制 reflow 的影响范围。

减少重排的次数

1. 样式集中改变

不要频繁的操作样式,对于一个静态页面来说,明智且可维护的做法是更改类名而不是修改样式。

对于动态改变的样式来说,相较每次微小修改都直接触及元素,更好的办法是统一在 cssText 变量中编辑。

虽然现在大部分浏览器都会有 Flush 队列进行渲染优化,但是有些老版本的浏览器如 IE6 效率依然低下。

// bad
var left = 10;
var top = 10;
el.style.left = left + "px";
el.style.top = top + "px";

// 当top和left的值是动态计算而成时...
// better 
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

// better
el.className += " className";

复制代码

2. 分离读写操作

DOM 的多个读操作(或者多个写操作),应该放在一起。不要两个读操作之间,加入一个写操作。

// bad 强制刷新 触发四次重排+重绘
div.style.left = div.offsetLeft + 1 + 'px';
div.style.top = div.offsetTop + 1 + 'px';
div.style.right = div.offsetRight + 1 + 'px';
div.style.bottom = div.offsetBottom + 1 + 'px';

// good 缓存布局信息 相当于读写分离 触发一次重排+重绘
var curLeft = div.offsetLeft;
var curTop = div.offsetTop;
var curRight = div.offsetRight;
var curBottom = div.offsetBottom;

div.style.left = curLeft + 1 + 'px';
div.style.top = curTop + 1 + 'px';
div.style.right = curRight + 1 + 'px';
div.style.bottom = curBottom + 1 + 'px';

复制代码

原来的操作会导致四次重排,读写分离之后实际上只触发了一次重排,这都得益于浏览器的渲染队列机制

当我们修改了元素的几何属性,导致浏览器触发重排或重绘时。它会把该操作放进渲染队列,等到队列中的操作到了一定的数量或者到了一定的时间间隔时,浏览器就会批量执行这些操作。

3. 将 DOM 离线

“离线”意味着不在当前的 DOM 树中做修改,我们可以这样做:

  • 使用 display: none

    一旦我们给元素设置 display:none 时(只有一次重排重绘),元素便不会存在于渲染树中,相当于将其从页面上“拿掉”,我们之后的操作将不会触发重排和重绘,添加足够多的变更后,通过 display属性显示(另一次重排重绘)。通过这种方式即使大量变更也只触发两次重排。另外,visibility : hidden 的元素只对重绘有影响,不影响重排。

  • 通过 documentFragment 创建一个 DOM 碎片,在它上面批量操作 DOM ,操作完成之后,再添加到文档中,这样只会触发一次重排。

    <ul id='fruit'>
      <li> apple </li>
      <li> orange </li>
    </ul>
    
    复制代码

    如果代码中要添加内容为peach、watermelon两个选项,你会怎么做?

    var lis = document.getElementById('fruit');
    var li = document.createElement('li');
    li.innerHTML = 'apple';
    lis.appendChild(li);  // 重排第一次
    
    var li = document.createElement('li');
    li.innerHTML = 'watermelon';
    lis.appendChild(li);  // 重排第二次
    
    复制代码

    这时启用 fragment 元素

    var fragment = document.createDocumentFragment();
    
    var li = document.createElement('li');
    li.innerHTML = 'apple';
    fragment.appendChild(li);
    
    var li = document.createElement('li');
    li.innerHTML = 'watermelon';
    fragment.appendChild(li);
    
    document.getElementById('fruit').appendChild(fragment); // 只重排了一次
    
    复制代码

    文档片段是个轻量级的 document 对象,它的设计初衷就是为了完成这类任务——更新和移动节点。文档片段的一个便利的语法特性是当你附加一个片断到节点时,实际上被添加的是该片断的子节点,而不是片断本身。只触发了一次重排,而且只访问了一次实时的 DOM。

  • 复制节点,在副本上工作,然后替换它!

4. 使用 absolute 或 fixed 脱离文档流

使用绝对定位会使得该元素单独成为渲染树中 body 的一个子元素,重排开销比较小,不会对其他节点造成太多影响。

当你在这些节点上放置这个元素时,一些其它在这个区域内的节点可能需要重绘,但是不需要重排。

5. 优化动画

  • 可以把动画效果应用到 position 属性为 absolutefixed 的元素上,这样对其他元素影响较小。

    动画效果还应牺牲一些平滑,来换取速度,这中间的度自己衡量: 比如实现一个动画,以1个像素为单位移动这样最平滑,但是Layout就会过于频繁,大量消耗 CPU 资源,如果以3个像素为单位移动则会好很多

  • 启用 GPU 加速 GPU 硬件加速是指应用 GPU 的图形性能对浏览器中的一些图形操作交给 GPU 来完成,因为 GPU 是专门为处理图形而设计,所以它在速度和能耗上更有效率。

    GPU 加速通常包括以下几个部分:Canvas2D,布局合成, CSS3转换(transitions),CSS3 3D变换(transforms),WebGL和视频(video)。

    /*
      * 根据上面的结论
      * 将 2d transform 换成 3d
      * 就可以强制开启 GPU 加速
      * 提高动画性能
      */
      div {
        transform: translate3d(10px, 10px, 0);
      }
    
    复制代码

如何在浏览器中查看页面渲染时间?

  1. 打开开发者工具:点击 Performance 左侧有个**小圆点,**点击刷新页面会录制整个页面加载出来 时间的分配情况。如下图

image.png

  • 蓝色: 网络通信和HTML解析
  • 黄色: JavaScript执行
  • 紫色: 样式计算和布局,即重排
  • 绿色: 重绘

哪种色块比较多,就说明性能耗费在那里。色块越长,问题越大。

  1. 点击 Event Log:单独勾选 Loading 项会显示 html 和 css 加载时间。如下图:

image.png

  1. 解析完 DOM+CSSOM 之后会生成一个渲染树 Render Tree,就是 DOM 和 CSSOM 的一一对应关系。

  2. 通过渲染树中在屏幕上“画”出的所有节点,称为渲染

小结

  • 渲染的三个阶段 LayoutPaintComposite LayersLayout:重排,又叫回流。 **Paint:**重绘,重排重绘这些步骤都是在 CPU 中发生的。 Compostite Layers:CPU 把生成的 BitMap(位图)传输到 GPU,渲染到屏幕。
  • CSS3 就是在 GPU 发生的:Transform Opacity。在 GPU 发生的属性比较高效。所以 CSS3 性能比较高

参考文档

文章分类
前端
文章标签