在浏览器渲染过程中最后一步骤是合成 (compositing),在某些情况,我们可以透过一些技巧只需要让浏览器合成 (compositing),而避免回流 (Reflow) 和重绘 (Repaint)。
以下提供几个方法:
- 移动调整元素时,使用
transform - 使用
opacity来改变元素的能见度 - 如果需要频繁重绘或回流的节点,可以透过
will-change设定成独立的图层,因为独立的图层可以避免该节点渲染行为影像到其他节点。哪些css属性会创建新的层叠上下文body > .sidebar { will-change: transform; } - 避免频繁用 JavaScript 操作 DOM 节点