在浏览器渲染过程中最后一步骤是合成 (compositing),在某些情况,我们可以透过一些技巧只需要让浏览器合成 (compositing),而避免回流 (Reflow) 和重绘 (Repaint)。

以下提供几个方法:

  • 移动调整元素时,使用  transform
  • 使用  opacity  来改变元素的能见度
  • 如果需要频繁重绘或回流的节点,可以透过  will-change  设定成独立的图层,因为独立的图层可以避免该节点渲染行为影像到其他节点。哪些css属性会创建新的层叠上下文
      body > .sidebar {
        will-change: transform;
      }
  • 避免频繁用 JavaScript 操作 DOM 节点