will-change

快速参考

示例

使用 will-change 进行优化

使用 will-change-scroll、will-change-contents 和 will-change-transform 工具可以优化预期即将发生变化的元素，通过指示浏览器在动画实际开始之前准备好必要的动画：

<div class="overflow-auto will-change-scroll">
  <!-- ... -->
</div>

建议您在元素即将变化时应用这些工具，并在变化结束后使用 will-change-auto 迅速移除它们。

will-change 属性旨在作为处理已知性能问题的最后手段。避免过度使用这些工具，或者仅仅为了预期性能问题而使用它们，因为这实际上可能会导致页面性能下降。

使用自定义值

使用 will-change-[<value>] 语法可以根据完全自定义的值来设置 will-change 属性：

<div class="will-change-[top,left] ...">
  <!-- ... -->
</div>

对于 CSS 变量，您还可以使用 will-change-(<custom-property>) 语法：

<div class="will-change-(--my-properties) ...">
  <!-- ... -->
</div>

这只是 will-change-[var(<custom-property>)] 的简写形式，它会自动为您添加 var() 函数。