CSS前端页面渲染优化属性will change的具体使用

前言 当触发scroll、resize这类的滚动事件时,被触发的频率非常高,间隔也特别近。如果事件中涉及到大量的位置计算、DOM操作、元素重绘等工作,并且这些工作无法在下一个scroll事件出发前完成,就会造成浏览器掉帧(掉帧就是例如图像一闪一闪的,运动不流畅的情况)。加之用户鼠标滚动往往是连续的,就会持续触发scroll事件导致掉帧扩大、浏览器CPU使用率增加,用户体验收到影响。 而CSS属性will-change为web开发者提供了一种告知浏览器该元素会有哪些变化的方法,这样浏览器就可以在元素属性真正发生变化之前提前做好对应的优化准备工作。这种优化可以将一部分复杂的计算工作提前准备好,使页