重排重绘
原创小于 1 分钟
参考:https://github.com/AlloyTeam/Mars/blob/master/performance/css-property-animation-performance.md
repaint不一定触发relayout,但relayout一定会发生repaint。
- CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recomposite
- Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,这也是为什么我们推荐在CSS动画中使用
webkit-transform: translateX(3em)
的方案代替使用left: 3em
,因为left
会额外触发layout与paint,而webkit-transform
只触发整个页面composite