CSS（GPU）动画优化

ゞ浴缸里的玫瑰 2022-05-30 05:19 174阅读 0赞

![这里写图片描述][format_png]  
浏览器在渲染时会将dom tree 分类多个图层，每个图层独立进行reflow、repaint，然后展现在屏幕上。  
reflow和repaint都是耗费浏览器性能的操作，这两者尤以reflow为甚；因为每次reflow，浏览器都要重新计算每个元素的形状和位置。

下面是一些针对reflow和repaint的最佳实践：

1.  不要一条一条地修改dom的样式，尽量使用className一次修改。
2.  将dom离线后修改  
    使用documentFragment对象在内存里操作dom。  
    先把dom节点display:none;（会触发一次reflow）。然后做大量的修改后，再把它显示出来。  
    clone一个dom节点在内存里，修改之后；与在线的节点相替换。
3.  不要使用table布局，一个小改动会造成整个table的重新布局。
4.  transform和opacity只会引起合成，不会引起布局和重绘。

浏览器将a元素提升为一个复合层有很多种原因，下面列举了一些：

1.  3d或透视变换css属性，例如translate3d,translateZ等等（js一般通过这种方式，使元素获得复合层）
2.  `<video><iframe><canvas><webgl>`等元素。
3.  混合插件（如flash）。
4.  元素自身的 opacity和transform 做 CSS 动画。
5.  拥有css过滤器的元素。
6.  使用will-change属性。
7.  position:fixed。
8.  元素有一个 z-index 较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)

优化技巧  
避免隐式合成

1.  保持动画的对象的z-index尽可能的高。理想的，这些元素应该是body元素的直接子元素。当然，这不是总可能的。所以你可以克隆一个元素，把它放在body元素下仅仅是为了做动画。
2.  will-change属性使动画变得流畅，但不能滥用。否则导致内存溢出。动画结束后remove掉will-change。

动画中只使用transform和opacity

用css动画而不是js动画

1.  基于css的动画，不仅仅更快；也不会被大量的js计算所阻塞。

优化技巧总结

1.  减少浏览器的重排和重绘的发生。
2.  不要使用table布局。
3.  css动画中尽量只使用transform和opacity，这不会发生重排和重绘。
4.  尽可能地只使用css做动画。
5.  避免浏览器的隐式合成。
6.  改变复合层的尺寸。

[format_png]: /images/20220530/17c142a916b94b36ab984d0e69d108d9.png