css - 如何决定是否使用 CSS 属性“will-change”

Question

最近我深入研究了 CSS动画和过渡的主题。

我知道 CSS 属性will-change可用于向浏览器提示，该元素将在不久的将来更改（这可以提高渲染性能）。

有几个开发人员will-change用来提高性能的例子，例如：

• https://www.android.com/
• https://www.cube.eu/
• https://www.mrsandmr.com/

但是文档明确指出：

警告：will-change 旨在用作最后的手段，以尝试处理现有的性能问题。它不应该用于预测性能问题。

那么，需要考虑哪些基本因素，是否使用will-change- 或不使用？

Answer 1

DigitalOcean 对此发表了一篇很棒的文章，我强烈建议您查看。

https://www.digitalocean.com/community/tutorials/css-will-change

正如其他人所说，will-change可以在浏览器中创建一个新的“层”。如果您在特定父元素下有多个动画或过渡，最好将其分配will-change给该父元素，同时将动画子元素保留其标准动画/过渡。

编辑：我应该指出，添加will-change多个位置会增加您的绘画时间，正如其他人所提到的，这会降低您的网站加载速度。