详解盒子端CSS动画性能提升

var rAF = function () {
    return (
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000 / 60);
        }
    );
}();
 
var frame = 0;
var allFrameCount = 0;
var lastTime = Date.now();
var lastFameTime = Date.now();
 
var loop = function () {
    var now = Date.now();
    var fs = (now - lastFameTime);
    var fps = Math.round(1000 / fs);
 
    lastFameTime = now;
    // 不置 0，在动画的开头及结尾记录此值的差值算出 FPS
    allFrameCount++;
    frame++;
 
    if (now > 1000 + lastTime) {
        var fps = Math.round((frame * 1000) / (now - lastTime));
        // console.log('fps', fps); 每秒 FPS
        frame = 0;
        lastTime = now;
    };
 
    rAF(loop);
}

研究结论

所以，我们的目标就是在使用 GPU 硬件加速的基础之上，更深入的去优化 CSS 动画，先给出最后的一个优化步骤方案：

1.精简 DOM ，合理布局

2.使用 transform 代替 left、top，减少使用耗性能样式

3.控制频繁动画的层级关系

4.考虑使用 will-change

5.使用 dev-tool 时间线 timeline 观察，找出导致高耗时、掉帧的关键操作

下文会有每一步骤的具体分析解释。

Web 每一帧的渲染

要想达到 60 FPS，每帧的预算时间仅比 16 毫秒多一点 (1 秒/ 60 = 16.67 毫秒)。但实际上，浏览器有整理工作要做，因此您的所有工作需要尽量在 10 毫秒内完成。

而每一帧，如果有必要，我们能控制的部分，也是像素至屏幕管道中的关键步骤如下：

优化动画步骤

先给出一个步骤，调优一个动画，有一定的指导原则可以遵循，一步一步深入动画:

1.精简 DOM ，合理布局

这个没什么好说的，如果可以，精简 DOM 结构在任何时候都是对页面有帮助的。

2.使用 transform 代替 left、top，减少使用耗性能样式

现代浏览器在完成以下四种属性的动画时，消耗成本较低：

• position（位置）:transform: translate(npx, npx)
• scale（比例缩放）：transform: scale(n)
• rotation（旋转） ：transform: rotate(ndeg)
• opacity（透明度）：opacity： 0...1

如果可以，尽量只使用上述四种属性去控制动画。

不同样式在消耗性能方面是不同的，改变一些属性的开销比改变其他属性要多，因此更可能使动画卡顿。

例如，与改变元素的文本颜色相比，改变元素的box-shadow将需要开销大很多的绘图操作。 改变元素的width可能比改变其transform要多一些开销。如box-shadow属性，从渲染角度来讲十分耗性能，原因就是与其他样式相比，它们的绘制代码执行时间过长。

这就是说，如果一个耗性能严重的样式经常需要重绘，那么你就会遇到性能问题。其次你要知道，没有不变的事情，在今天性能很差的样式，可能明天就被优化，并且浏览器之间也存在差异。

开启 GPU 硬件加速

归根结底，上述四种属性的动画消耗较低的原因是会开启了 GPU 硬件加速。动画元素生成了自己的图形层（GraphicsLayer）。

通常而言，开启 GPU 加速的方法我们可以使用

will-change: transform

这会使声明了该样式属性的元素生成一个图形层，告诉浏览器接下来该元素将会进行 transform 变换，让浏览器提前做好准备。

使用will-change并不一定会有性能的提升，因为即使浏览器预料到会有这些更改，依然会为这些属性运行布局和绘制流程，所以提前告诉浏览器，也并不会有太多性能上的提升。这样做的好处是，创建新的图层代价很高，而等到需要时匆忙地创建，不如一开始直接创建好。

对于 Safari 及一些旧版本浏览器，它们不能识别will-change，则需要使用某种 translate 3D 进行 hack，通常会使用

transform: translateZ(0)

所以，正常而言，在生产环境下，我们可能需要使用如下代码，开启硬件加速：

{
    will-change: transform;
    transform: translateZ(0);
}

3.控制频繁动画的层级关系

动画层级的控制的意思是尽量让需要进行 CSS 动画的元素的z-index保持在页面最上方，避免浏览器创建不必要的图形层（GraphicsLayer），能够很好的提升渲染性能。

OK，这里又提到了图形层（GraphicsLayer），这是一个浏览器渲染原理相关的知识（WebKit/blink内核下）。它能对动画进行加速，但同时也存在相应的加速坑！

<div class="container">
<div class="swiper">轮播图</div>
<ul class="list">
<li>列表li</li>
<li>列表li</li>
<li>列表li</li>
<li>列表li</li>
</ul>
</div>

.swiper {
    position: static;
    animation: 10s move infinite;
}
 
.list {
    position: relative;
}
 
@keyframes move {
    100% {
        transform: translate3d(10px, 0, 0);
    }
}