frontend-notes

重排&重绘

页面生成的过程

1.HTML 被 HTML 解析器解析成 DOM 树； 2.CSS 被 CSS 解析器解析成 CSSOM 树； 3.结合 DOM 树和 CSSOM 树，生成一棵渲染树(Render Tree)，这一过程称为 Attachment； 4.生成布局(flow)，浏览器在屏幕上“画”出渲染树中的所有节点； 5.将布局绘制(paint)在屏幕上，显示出整个页面。 第四步和第五步是最耗时的部分，这两步合起来，就是我们通常所说的渲染。

重排 & 重绘

• 重排：布局发生改变
  • 页面初始渲染，这是开销最大的一次重排
  • 添加/删除可见的DOM元素
  • 改变元素位置
  • 改变元素尺寸，比如边距、填充、边框、宽度和高度等
  • 改变元素内容，比如文字数量，图片大小等
  • 改变元素字体大小
  • 改变浏览器窗口尺寸，比如resize事件发生时
  • 激活CSS伪类（例如：:hover）
  • 设置 style 属性的值，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow
  • 查询某些属性或调用某些计算方法：offsetWidth、offsetHeight等，除此之外，当我们调用 getComputedStyle方法，或者IE里的 currentStyle 时，也会触发重排，原理是一样的，都为求一个“即时性”和“准确性”。
  • display:none
• 重绘：某些元素的外观被改变
  • color
  • border-style
  • visibility : hidden

    重绘不一定导致重排，但重排一定会导致重绘。

重排优化建议：

• 减少重排范围 我们应该尽量以局部布局的形式组织html结构，尽可能小的影响重排的范围。
  • 尽可能在低层级的DOM节点上，而不是像上述全局范围的示例代码一样，如果你要改变p的样式，class就不要加在div上，通过父元素去影响子元素不好。
  • 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局。那么在不得已使用table的场合，可以设置table-layout:auto;或者是table-layout:fixed这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。
• 减少重排次数
  • 样式集中改变 不要频繁的操作样式，对于一个静态页面来说，明智且可维护的做法是更改类名而不是修改样式，对于动态改变的样式来说，相较每次微小修改都直接触及元素，更好的办法是统一在 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";
    

  • 分离读写操作 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';
    

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

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

  • 将 DOM 离线 “离线”意味着不在当前的 DOM 树中做修改，我们可以这样做：
    • 使用 display:none 一旦我们给元素设置 display:none 时（只有一次重排重绘），元素便不会再存在在渲染树中，相当于将其从页面上“拿掉”，我们之后的操作将不会触发重排和重绘，添加足够多的变更后，通过 display属性显示（另一次重排重绘）。通过这种方式即使大量变更也只触发两次重排。另外，visibility : hidden 的元素只对重绘有影响，不影响重排。
    • 通过 documentFragment 创建一个 dom 碎片,在它上面批量操作 dom，操作完成之后，再添加到文档中，这样只会触发一次重排。
  • 使用 absolute 或 fixed 脱离文档流
  • 优化动画
    • 可以把动画效果应用到 position属性为 absolute 或 fixed 的元素上，这样对其他元素影响较小
    • 启用GPU加速

参考

• 重排(reflow)和重绘(repaint)
  • 如何在浏览器中查看页面渲染时间

This site is open source. Improve this page.