H5中CSS3动画的性能优化

2020年的最后10天，愿你来年有始料不及的运气，也有突如其来的惊喜。

触发重布局的属性

有些节点，当你改变他时，会需要重新布局（这也意味着需要重新计算其他被影响的节点的位置和大小）。这种情况下，被影响的DOM树越大（可见节点），重绘所需要的时间就会越长，而渲染一帧动画的时间也相应变长。所以需要尽力避免这些属性。

一些常用的改变时会触发重布局的属性：

盒子模型相关属性会触发重布局：

•width•height•padding•margin•display•border-width•border•min-height

定位属性及浮动也会触发重布局：

•top•bottom•left•right•position•float•clear

改变节点内部文字结构也会触发重布局：

•text-align•overflow-y•font-weight•overflow•font-family•line-height•vertival-align•white-space•font-size

这么多常用属性都会触发重布局，可以看到，他们的特点就是可能修改整个节点的大小或位置，所以会触发重布局。

别使用CSS类名做状态标记

如果在网页中使用CSS的类来对节点做状态标记，当这些节点的状态标记类修改时，将会触发节点的重绘和重布局。所以在节点上使用CSS类来做状态比较是代价很昂贵的。

触发重绘的属性

修改时只触发重绘的属性有：

•color•border-style•border-radius•visibility•text-decoration•background•background-image•background-position•background-repeat•background-size•outline-color•outline•outline-style•outline-width•box-shadow

这样可以看到，这些属性都不会修改节点的大小和位置，自然不会触发重布局，但是节点内部的渲染效果进行了改变，所以只需要重绘就可以了。

手机就算重绘也很慢

在重绘时，这些节点会被加载到GPU中进行重绘，这对移动设备如手机的影响还是很大的。因为CPU不如台式机或笔记本电脑，所以绘画的时间更长。

触发图层重组的属性

透明度竟然不会触发重绘

需要注意的是，上面那些触发重绘的属性里面没有opacity（透明度），很奇怪不是吗？实际上透明度的改变后，GPU在绘画时只是简单的降低之前已经画好的纹理的alpha值来达到效果，并不需要整体的重绘。不过这个前提是这个被修改opacity本身必须是一个图层，如果图层下还有其他节点，GPU也会将他们透明化。

强迫浏览器创建图层

在Blink和WebKit的浏览器中，当一个节点被设定了透明度的相关过渡效果或动画时，浏览器会将其作为一个单独的图层，但很多开发者使用translateZ(0)或者translate3d(0,0,0)去使浏览器创建图层。这种方式可以消除在动画开始之前的图层创建时间，使得动画尽快开始（创建图层和绘制图层还是比较慢的），而且不会随着抗锯齿而导出突变。不过这种方法需要节制，否则会因为创建过多的图层导致崩溃。

transform变换是你的选择

我们通过节点的transform可以修改节点的位置、旋转、大小等。我们平常会使用left和top属性来修改节点的位置，但正如上面所述，left和top会触发重布局，修改时的代价相当大。取而代之的更好方法是使用translate，这个不会触发重布局。