如何保持布局绘制成本较低

[thjxs]

High Performance Animations

[thjxs]

四种低成本的动画方式

• Position transform: translate(10px, 10px);
• Scale transform: scale(2);
• Rotation transform: rotate(30deg);
• Opacity opacity: 0.5;

[thjxs]

影响布局的样式

width height padding margin display border top position font-size float text-align overflow font-weight clear

影响绘制的样式

color border-style visibility background outline

[thjxs]

当一个元素的 width 属性改变时，浏览器可能需要计算布局（位置和大小），由于元素的溢出和相互影响，可能导致文档树的布局自下而上地被重新计算

[thjxs]

对影响绘制的样式设置动画，将会引起重绘，并且将元素所属的图层提交给GPU处理。对于移动端来说，代价非常昂贵

[thjxs]

使用 translateZ(0) 或者 translate3d(0,0,0) 将人为强制性创建一个图层。
为元素增加图层，最好在动画开始之前
当元素是图层的唯一元素时，改变 opacity 不会引起重绘