当我们通过某些行为(点击、移动或滚动)触发页面进行大面积绘制的时候,浏览器往往是没有准备的,只能被动使用CPU去计算与重绘,由于没有事先准备,应付渲染够呛,于是掉帧卡顿。而CSS属性will-change为web开发者提供了一种告知浏览器该元素会有哪些变化的方法,这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。这种优化可以将一部分复杂的计算工作提前准备好,使页面的反应更为快速灵敏。
不要像下面这样直接写在默认状态中,因为will-change会一直挂着:
.will-change { will-change: transform; transition: transform 0.3s;}
will-change
:hover { transform: scale(1.5);}
可以让父元素hover的时候,声明will-change,这样,移出的时候就会自动remove,触发的范围基本上是有效元素范围
.will-change-parent:hover .will-change { will-change: transform;}
.will-change { transition: transform 0.3s;}.will-change:hover { transform: scale(1.5);}
网友评论