前端 - CSS:will-change 什么时候该用和不该用

CSS 中的 will-change 属性通常被误解或未正确使用，在这篇简短的文章中，我将揭开该属性的神秘面纱，以便让你可以正确使用它，从而提高 CSS 动画性能。

什么是will-change

简而言之，will-change 属性是一种提前告诉浏览器哪些属性和元素可能被操作的方法。 使用此信息，浏览器可以在需要变化之前进行优化，从而获得更流畅的体验。这方面的一个例子是，如果我们在一个元素上应用一个变换，我们可以像这样通知浏览器：

也可以设置多个属性：

will-change 可以取四个可能的值

• auto - 表示没有特别指定哪些属性会变化，浏览器需要自己去猜，然后使用浏览器经常使用的一些常规方法优化
• scroll-position - 表示开发者希望在不久后改变滚动条的位置或者使之产生动画
• contents - 表示开发者希望在不久后改变元素内容中的某些东西，或者使它们产生动画。
• custom-indent - 表示开发者希望在不久后改变指定的属性名或者使之产生动画。如果属性名是简写，则代表所有与之对应的简写或者全写的属性

什么时候使用？

正如 Mozilla 的 MDN 所述，will-change 应作为最后的手段。如果我们滥用 will-change，性能不仅不会改善，反而会遭到损害。 如果您的动画/过渡流畅清晰，则无需使用 will-change，浏览器已经在不使用 will-change 的情况下进行优化。

不要这么做：

很多人会写这样的代码：

这弊大于利，will-change 是将来时态，因此不应在动画发生时应用它。在这里更好地使用 will-change 是将 will-change 放在 my-element 的父级上，如下所示：

这让浏览器提前知道要针对这种变化进行优化。 如果您的动画卡顿或闪烁，请记住将此作为最后的手段。

删除will-change

Mozilla 建议在元素更改完成后删除 will-change。 这就是为什么还建议通过 JavaScript 设置 will-change 以便您可以删除它的原因。 如果 CSS 样式表中设置了 will-change，则无法删除。就代码而言，这非常简单，如下所示：

上面的代码非常简单，我们将我们的 will-change 添加到父元素悬停时，然后当触发 animationend 事件时，动画结束，所以我们需要删除 will-change。

在某些情况下，在样式表中设置 will-change 是有意义的。 像这样的情况是一个元素可能会被多次交互，这可能是按钮上的涟漪效应或侧边栏滑出。 通常，样式表中应该只有少数 will-change 属性，其余的最好通过 JavaScript 设置。