CSS属性：will-change

will-change属性是用于通知浏览器某个元素将要有哪些变化，从而可以优化渲染过程。

语法

element {
    will-change: auto|scroll-position|contents|transform|opacity|left,top|visibility;
}

值

• auto：默认值，浏览器自行决定优化方向。
• scroll-position：元素即将滚动。
• contents：元素内容即将改变。
• transform：元素即将进行变换。
• opacity：元素即将改变透明度。
• left 和 top：元素即将发生移动。
• visibility：元素即将隐藏或显示。

示例

.box {
    will-change: transform;
    transform: translate(100px, 100px);
}

以上示例中，通过will-change属性告诉浏览器该元素即将进行变换，并将变换信息通过transform属性指定。这样浏览器会提前为该元素做好优化，例如创建新图层、裁剪等，从而提高渲染效率。

注意事项

• will-change应该谨慎使用，只在有需要的情况下使用。
• will-change可以提高页面的性能，但不是所有情况下都能提升性能。过度使用会带来反效果。
• will-change应该在变换发生之前或发生时设置，并在变换结束后移除。这可以防止不必要的内存使用。
• 变换结束后应该将will-change设置为auto或移除该属性，否则会一直占用内存。

浏览器支持

IE | Edge | Firefox | Chrome | Safari | Opera -- | ---- | ------- | ------ | ------ | ----- 无 | 12+ | 36+ | 36+ | 9.1+ | 23+

可以通过以下链接查看各大浏览器的支持程度：

• caniuse.com