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-[<值>] 语法 设置 will-change 属性基于完全自定义的值

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

对于 CSS 变量，您还可以使用 will-change-(<自定义属性>) 语法

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

这只是 will-change-[var(<自定义属性>)] 的简写，它会自动为您添加 var() 函数。