许多 CSS 变量对性能的影响

Question

这是一个有点笼统的问题。

有人知道在给定文档中使用多个 CSS 变量对性能的影响吗？有人做过测试吗？

您将变量关联到的元素是否对性能有任何影响？例如，将所有变量分配给所有变量而:root不是将它们分配给可能只使用它们的单个样式块，对性能的影响是否更大？

Answer 1

是的，已经进行了测试。本质上，您通过 JavaScript 应用 CSS 更改并测量性能。

您将需要了解 CSS 变量的范围和受影响元素的数量。随着这些数字的增加，您的抽奖时间也会增加。

在https://lisilinhart.info/posts/css-variables-performance/上有一篇关于这个主题的方便文章

TL;DR 请注意样式重新计算，因为 CSS 变量是可继承的——更改父级上的变量会影响许多子级 更喜欢为元素使用单个类以使浏览器的样式计算更容易 calc() 具有良好的变量性能，但仍然浏览器对某些单位（如 deg 或 ms）的支持存在问题 更喜欢使用 setProperty 而不是内联样式在 JavaScript 中设置 CSS 变量

还有另一句话：

通过 Javascript，首先在 .container 父元素上设置了 --bg 变量，这导致了 76 毫秒的相当长的持续时间。然后在第一个子 .el 上设置了相同的变量，它只持续了大约 1.9 毫秒。因此，父元素使用此变量的子元素越多，在此元素上设置 CSS 变量的成本就越高。

Answer 2

FWIW，CSS 变量性能基准 2021在 10,000 个 HTML 节点上使用 5000 个 CSS 变量进行了一些测试，它只比原始 CSS 慢 0.7%。