前端知识点will-change
will-change 为 web 开发者提供了一种告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。
注意点
- 不要将
will-change应用到太多元素上：浏览器已经尽力尝试去优化一切可以优化的东西了。有一些更强力的优化，如果与will-change结合在一起的话，有可能会消耗很多机器资源，如果过度使用的话，可能导致页面响应缓慢或者消耗非常多的资源。 - 有节制地使用：通常，当元素恢复到初始状态时，浏览器会丢弃掉之前做的优化工作。但是如果直接在样式表中显式声明了 will-change 属性，则表示目标元素可能会经常变化，浏览器会将优化工作保存得比之前更久。所以最佳实践是当元素变化之前和之后通过脚本来切换
will-change的值。 - 不要过早应用
will-change优化：如果你的页面在性能方面没什么问题，则不要添加will-change属性来榨取一丁点的速度。will-change的设计初衷是作为最后的优化手段，用来尝试解决现有的性能问题。它不应该被用来预防性能问题。过度使用will-change会导致大量的内存占用，并会导致更复杂的渲染过程，因为浏览器会试图准备可能存在的变化过程。这会导致更严重的性能问题。 - 给它足够的工作时间：这个属性是用来让页面开发者告知浏览器哪些属性可能会变化的。然后浏览器可以选择在变化发生前提前去做一些优化工作。所以给浏览器一点时间去真正做这些优化工作是非常重要的。使用时需要尝试去找到一些方法提前一定时间获知元素可能发生的变化，然后为它加上
will-change属性。
will-change 通过告知浏览器该元素会有哪些变化，使浏览器提前做好优化准备，增强页面渲染性能。
兼容性
属性值
auto：浏览器自行决定优化方式scroll-position：浏览器即将改变滚动条位置时使用contents：即将改变元素内容时使用<custom-ident>：即将改变指定的属性名或者使之产生动画。如果属性名是简写，则代表所有与之对应的简写或者全写的属性。如：will-change: transform;will-change: transform, opacity;
注意事项
- 不要将
will-change应用到太多元素上，如果过度使用的话，可能导致页面响应缓慢或者消耗非常多的资源。 - 通常，当元素恢复到初始状态时，浏览器会丢弃掉之前做的优化工作。但是如果直接在样式表中显式声明了
will-change属性，则表示目标元素可能会经常变化，浏览器会将优化工作保存得比之前更久。所以最佳实践是使用完后及时清除。 - 如果你的页面在性能方面没什么问题，则不要添加
will-change属性来榨取一丁点的速度。
题外补充
hack类方式3D transform（如：translate3D, scaleZ）也可启用GPU加速， 但will-change是专为启用GPU加速设计的will-change后会立即启用GPU加速，所以应在使用前再赋予改属性，使用后应该删除这个属性js中使用添加这个属性时，应在动画结束onanimationend回调函数中将willChange置为auto