牛逼的 will-change属性
will-change属性可以提前通知浏览器我们要对元素做什么动画，这样浏览器可以提前准备合适的优化设置。这样可以避免对页面响应速度有重要影响的昂贵成本。元素可以更快的被改变，渲染的也更快，这样页面可以快速更新，表现的更加流畅。
举个例子，当对于素使用 CSS 3D变形时，元素及其内容可以在合成到页面之前被创建到我们之前说的layer。然而把元素放到layer中是个昂贵的操作，这将会导致变形动画延迟一个课件的瞬间，也就是flicker
为了避免这种延时，我们可以在发生之前通知浏览器，这样浏览器会有一定的时间去准备这些变化，当发生的时候layer已经准备好了，这样动画酒会很流畅，不会闪屏
使用will-change提示浏览器关于即将发生的变形十分简单，添加个CSS属性就行
will-change: transform;
也可以告诉浏览器要改变元素的滚动条位置，或者多个要变化的属性，写下属性的名字就行，也可以写多个，逗号隔开
will-change: transform, opacity;
声明了元素即将进行的变化会让浏览器在渲染页面时做更好的决定，这明显比之前说的3D hacks要好。
合理使用
了解了will-change的行为，为浏览器上一切元素设置will-change是不是效率会变高？答案是否定的，will-change如果被滥用会使页面崩溃。
will-change也有副作用，虽然并不直接可见，毕竟它只是在背后和浏览器说悄悄话，为了合理使用will-change，给一些小建议
不要声明太多属性或为太多元素声明
*,*::before,*::after { will-change: all; } 虽然看起来很屌，但其实对页面渲染伤害很大，这样的规则设了和没设没什么区别，浏览器本来就尝试最优的渲染所有元素，就等于你让老师重点照顾班里每个同学一样，就是废话！
其实这甚至是有害的，因为一些操作会占用太多的资源，甚至会导致页面奔溃，就等于强制要求老师为每个学生补课，累死了。。。
给浏览器足够的时间工作
will-change顾名思义，通知浏览器即将发生的变化，而不是正在发生的变化。使用will-change，我们要求浏览器重点照顾我们声明的元素，为了这个浏览器需要一定的时间来组织优化操作，这样当变化发生的时候，优化才能没有延迟的作用到元素
在变化前立即为元素添加will-change几乎没有作用，可能还不如不设置，因为会导致新的layer创建
.element:hover { will-change: transform; transition: transform 2s; transform: rotate(30deg) scale(1.5); } 这样的设置就没什么用，我们需要给浏览器足够的时间，下面这样就是有用的，感受一下
.element { /* style rules */ transition: transform 1s ease-out; } .element:hover { will-change: transform; } .element:active { transform: rotateY(180deg); } 如果一定要hover的时候，也有技巧
.element { transition: opacity .3s linear; } /* declare changes on the element when the mouse enters / hovers its ancestor */ .ancestor:hover .element { will-change: opacity; } /* apply change when element is hovered */ .element:hover { opacity: .5; } 其实核心思想就是让浏览器有时间去准备
变化完成后移除will-change
对于一般的优化，当变化完成的时候浏览器会撤销优化，恢复普通模式，但是如果使用了will-change会导致该优化迟迟不能释放，这就要求我们用完了就释放
这时候我们需要借助JavaScript
'auto';}
当然对于用户会反复触发的操作放在style中不移除也可以
will-change属性的值
- auto 表示没有明确的意图; 无论是启发式和最优化，用户代理应该应用都和正常情况相同
- scroll-position 表示开发者期望去在接下来去改变或者有动画应用元素的滚动位置
- contents 表示开发者期望去在接下来去改变或者有动画应用元素的内容
-
用来排除关键字 will-change, none, all, auto, scroll-position, and contents, 从之外增加一些通用的关键字
will-change： transform：
will-change： opacity：will-change： top, left, bottom, right：
如果一个属性无最初的值,在这个元素上这个属性将创建一个堆栈的内容, 明确规定在will-change的属性必须在这个元素上创建一个堆栈的内容.
如果一个属性无最初的值, 这个属性将造成这个元素产生一个包含区块的固定定位的元素, 明确规定在 will-change的属性必须造成这个元素产生一个包含区块的固定定位的元素
浏览器兼容性
这个目前，相信以后会好
image
结束语
will-change可以帮助我们摆脱hack的硬件加速，但是能力越大、责任越大
Tab Atkins Jr
Set will-change to the properties you’ll actually change, on the elements that are actually changing. And remove it when they stop.