CSS3 动画“硬件加速”

[weekeight]

在做CSS3动画的时候我们总能听到说启用硬件加速来提高动画性能，但是却很少人被告知什么是“硬件加速”，为什么它能提高动画性能，怎么验证使用了它就提高了性能

前言

所谓“硬件加速”其实是一种笼统的叫法，实质上是浏览器借助了设备的显卡改变了渲染模型以达到避免/减少重绘/重排的效果，从而提高动画性能

大致原理

以Chrome为例，在硬件加速渲染通道下，复杂的页面会被分为多个层(Layer)， Chrome对各个层分别进行排版、绘图，再将绘图结果作为“纹理”上传至GPU， 由GPU完成层的3D变换(transform)等操作，最后再将GPU渲染好的层图像进行复合操作(Compesite Layers)，得到最终的画面结果。 因此，通过3D变换实现的位移、旋转、缩放将不会触发浏览器重绘（除非层的内容发生改变）。

如何新建层

目前所知，下面的CSS属性能够让元素创建自己的层

transorm: rotate3d();  // 注意 rotateZ() 和 rotate() 都不会触发层的新建
transform: translate3d();
position:fixed;
will-change: transform;
postion:absolute + z-index:n;
backface-visibility: hidden;

此外，有些元素本身就会新建自己的分层，不需要特别的CSS属性，如 video, audio, iframe, flash 插件等

如何验证

如果要元素是否真的新建了自己的层，在 Chrome 下可通过开启 Show layer borders 来观察，有黄色边框的元素都是有独立的层结构。

控制台 - ESC 按键 - Rendering - Show layer borders

如果需要进一步观察是否给动画带来了性能的优化，就要通过 timeline 来观察帧的情况来分析了