最近在做可视化项目用到了大量动画,发现页面很卡,就想到用硬件加速来优化
@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'
})