https://developer.mozilla.org/zh-CN/docs/Web/CSS/will-change

    will-change属性通过告诉浏览器什么属性、什么元素将会发生变化，可以对这些操作进行可能性的优化，由此提高CSS动画的执行效率。
    这个属性可以有4个值：

    • auto: 实行标准浏览器优化。
    • scroll-position: 指明元素的滚动位置将会出现动画变化，浏览器应该为滚动视窗内容的不可见部分事先做好准备。
    • contents: 指明元素的内容将会发生变化，浏览器不要缓存它们的内容。
    • : 指明will-change实施的目标属性，比如transform 或 opacity。

    如果想通知浏览器会发生一个transform方面的变化，可以这样写：

    1. .element {     will-change: transform; }

    我们还可以指定多个值，用逗号分隔，例如：

    1. .element {     will-change: transform, opacity; }

    然而，千万不要过度使用will-change属性，否则，事与愿违，页面的执行效率会降低，推荐的做法是当一个元素或属性发生变化时打开will-change，变化完成之后关闭它。

    属性会使浏览器中有问题的元素总是和改变很接近。这让浏览器不得不保持优化，因此增加了内存消耗。所以，我们需要拥有一个在正确是时间添加和移除。

    1. // 当鼠标移动到该元素上时给该元素设置 will-change 属性
    2. el.addEventListener('mouseenter', hintBrowser);
    3. // 当 CSS 动画结束后清除 will-change 属性
    4. el.addEventListener('animationEnd', removeHint);
    6. function hintBrowser() {
    7.   // 填写上那些你知道的，会在 CSS 动画中发生改变的 CSS 属性名们
    8.   this.style.willChange = 'transform, opacity';
    9. }
    11. function removeHint() {
    12.   this.style.willChange = 'auto';
    13. }

    当鼠标进入父容器的时候增加了优化，并且当鼠标移开的时候清除它。这同时暗示了每当鼠标进入父容器的时候，浏览器可以预期知道元素的变化。

    1. .will-change-parent:hover .will-change {
    2.   will-change: transform;
    3. }
    4. .will-change {
    5.   transition: transform 0.3s;
    6. }
    7. .will-change:hover {
    8.   transform: scale(1.5); 
    9. }