跳至主要內容

重排重绘

Cap原创小于 1 分钟javascript

参考:https://github.com/AlloyTeam/Mars/blob/master/performance/css-property-animation-performance.mdopen in new window

relayout&&repaint&&composite.png
relayout&&repaint&&composite.png

repaint不一定触发relayout,但relayout一定会发生repaint。

  • CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recomposite
  • Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,这也是为什么我们推荐在CSS动画中使用webkit-transform: translateX(3em)的方案代替使用left: 3em,因为left会额外触发layout与paint,而webkit-transform只触发整个页面composite