1. 简介
在web开发中，优化性能是很重要的一环，其中，CSS的优化也是关键之一。will-change属性就是用于提高CSS动画和过渡性能的一种方法。那么，什么是will-change属性呢？
2. 什么是will-change属性
will-change是一个CSS属性，用于告知浏览器哪些属性即将发生改变，以便浏览器有针对性地进行优化。你可以将will-change属性赋给任何数据类型，比如transform、opacity、scroll或其他属性。
在动态修改CSS属性时，will-change属性可以大幅提高动画性能和响应速度。这是因为浏览器可以有针对性的为will-change属性声明的元素进行优化。
2.1 语法
/* will-change 允许您告知浏览器将要进行哪些变更，以优化性能 */
/* 关键字auto表示浏览器可以自行决定优化方式 */
/* 关联属性可选 */
/* 全局关键字，会应用于所有关联属性 */
/* 类型1 */
will-change: auto | scroll-position | contents | all | [ || ]
/* 类型2 */
will-change: property-list;
/* gesture-key 隐藏手势识别 */
/* 会将GPU加速状态下的垂直位置更改放到主线程中，使页面响应更流畅 */
transform: gesture-key;
任何变化都会提高渲染成本，所以在使用will-change时我们也要注意，不要将will-change属性随意的添加到网站上。在某些情况下，will-change甚至可能会减少性能，因此，我们需要保持谨慎，并根据实际情况谨慎添加。
2.2 可用值
will-change允许使用几种值：
auto：默认值，表示浏览器自行决定优化方式
scroll-position：告知浏览器，触摸设备的滚动位置即将变化，以便浏览器优化屏幕重绘
contents：告知浏览器，该元素的子元素即将发生变化，以便浏览器优化重绘过程
all：告知浏览器，所有属性都将变化，以便浏览器优化性能
property：允许您将属性名称列出，以告知浏览器将要进行哪些更改。属性是用逗号分隔的列表。单独指定属性可以更好地优化接下来的重绘流程
< animateable-feature >：代表支持动画效果的属性，比如translate, opacity, left等等
< paint-feature >：代表支持绘制效果的属性，比如background-color, border-width等等
3. will-change的使用
在使用will-change之前，可以先利用浏览器提供的工具（如开发者工具）来比较添加will-change前后的性能。
比如，我们可以在一个样式中添加will-change属性，如下所示：
.box{
will-change: transform;
}
.box:hover{
transform: translateX(200px);
}
这个例子中，当.box元素处于:hover状态时，会根据X轴方向平移200px。添加will-change属性后，浏览器会在.box元素准备开始动画之后将它升级为一个独立的绘制层。这样，当我们改变元素的位置时，浏览器会更快地重新渲染元素。
4. 总结
will-change属性可以帮助我们提高CSS动画和过渡的性能。但是，在使用will-change时，要注意不要随意添加，减少因为添加will-change属性而带来的性能负担，最好是只针对那些会有较大影响的元素部分添加。