许多 CSS 变量对性能的影响
Effect of Many CSS Variables on Performance
这是一个比较笼统的问题。
是否有人知道在给定文档中使用多个 CSS 变量对性能的影响？有人做过测试吗？
与变量关联的元素对性能有影响吗？例如，将所有变量分配给 :root 比将它们分配给可能只使用它们的单个样式块更能阻碍性能吗？
是的，已经完成了一些测试。本质上，您通过 JavaScript 应用 CSS 更改并测量性能。
您将想要了解如何确定 CSS 变量的范围以及受影响元素的数量。随着这些数字的增加，您的抽奖时间也会增加。
https://lisilinhart.info/posts/css-variables-performance/
上有一篇关于这个主题的便利文章
TL;DR
be aware of style recalculations, since CSS Variables are inheritable — changing a variable on a parent can affect many children
prefer using single classes for elements to make style calculations easier for the browser
calc() has good performance with variables, but still has problems with browser support with certain units like deg or ms
prefer using setProperty rather than inline styles to set CSS variables in JavaScript
还有另一句话：
Via Javascript the --bg variable was first set on the .container parent element, which resulted in a fairly long duration of 76ms. Then the same variable was set on the first child .el , which only lasted about 1.9ms. So the more children a parent element has using this variable, the more expensive setting a CSS variable on this element gets.
这是一个比较笼统的问题。
是否有人知道在给定文档中使用多个 CSS 变量对性能的影响？有人做过测试吗？
与变量关联的元素对性能有影响吗？例如，将所有变量分配给 :root 比将它们分配给可能只使用它们的单个样式块更能阻碍性能吗？
是的，已经完成了一些测试。本质上，您通过 JavaScript 应用 CSS 更改并测量性能。
您将想要了解如何确定 CSS 变量的范围以及受影响元素的数量。随着这些数字的增加，您的抽奖时间也会增加。
https://lisilinhart.info/posts/css-variables-performance/
上有一篇关于这个主题的便利文章TL;DR be aware of style recalculations, since CSS Variables are inheritable — changing a variable on a parent can affect many children prefer using single classes for elements to make style calculations easier for the browser calc() has good performance with variables, but still has problems with browser support with certain units like deg or ms prefer using setProperty rather than inline styles to set CSS variables in JavaScript
还有另一句话：
Via Javascript the --bg variable was first set on the .container parent element, which resulted in a fairly long duration of 76ms. Then the same variable was set on the first child .el , which only lasted about 1.9ms. So the more children a parent element has using this variable, the more expensive setting a CSS variable on this element gets.