css动画GPU硬件加速与will-change

最近在做可视化项目用到了大量动画，发现页面很卡，就想到用硬件加速来优化

@keyframes testAnim {
            from {
                top: 0;    //1                        
                left: 0;   //1
                transform: translate(0,0)      //2
                transform: translate3d(0,0,0)  //3
            }
            to {
                top: 100px;
                left: 100px;
                transform: translate(100px,100px)
                transform: translate3d(100px,100px,0)
            }
}

上面是同一种动画的三种方式，可以打开chromeMore tools中Rendering的Paint flashing查看浏览器的repaint情况

会发现，第一种情况从头到尾都是绿色的，第二种只有开头和结尾，而第三种不会出现

这是因为translate3d属性触发了GPU的硬件加速功能，除了transform，类似的属性还有opacity、filter等，此时浏览器会创建一个独立的复合图层

硬件加速会使fps达到60，不过也会占用更多内存

在移动端推荐加上z-index属性，可以减少创建不必要的复合层

 

以上触发的硬件加速属于hack加速法，而will-change则通过告诉浏览器我要开始动画了，从而触发GPU

不推荐直接使用：

.will-change {
  will-change: transform;
  transition: transform 0.3s;
}
.will-change:hover {
  transform: scale(1.5);
}

推荐这样使用：

.will-change-parent:hover .will-change {
  will-change: transform;
}
.will-change {
  transition: transform 0.3s;
}
.will-change:hover {
  transform: scale(1.5);
}

也可以用js控制：

dom.onclick = function() {
    this.style.willChange = 'transform'
};
dom.addEventListener('animationend', function () {
    this.style.willChange = 'auto'
})