许多CSS变量对性能的影响

这是一个有点笼统的问题

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

---

与变量关联的元素是否对性能有任何影响？例如，将所有变量分配给

：root

比将它们分配给单独的样式块（可能只使用它们）对性能的影响更大吗？

是的，已经完成了一些测试。本质上，您可以通过JavaScript应用CSS更改并测量性能

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

网站上有一篇关于这个问题的便利文章

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

还有一句话：

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

---

我认为这在很大程度上取决于浏览器。好了，目前还没有针对这类事情发布任何性能测试（我可能错了）。“也许你自己测试一下？”阿列克西诺克说，如果我知道如何测试性能，我会的。我只是注意到我的一个页面非常慢，甚至在本地也是如此，我在根元素上使用了很多变量，尽管我不能100%确定这是原因：/使用浏览器附带的开发人员工具。它们可以向您显示性能和加载时间。@Anthony-这从本质上来说应该对您有所帮助-呈现是将网页的HTML标记转换为您作为用户看到的内容。哇。没想到这个问题会有一个简洁的答案。“很好。”阿列克西诺克，这真的不是一个宽泛的问题。远没有一些ppl r试图实现的那样广泛，我试图实现平滑的

转换：转换
（translate，scale，强迫它进入带有背面/translate3d的GPU）大约600个小尺寸的DOM元素，基本上是点。在我的Ipad Air 2上，转换速度约为60帧/秒。但在过渡开始之前，它会挂起1-2秒。感觉OOM 1k基本数学运算需要1-2秒，这相当糟糕。这与仔细定位~600个DOM元素（4px4px带背景色的空div，即，由于webkit或其他浏览器中没有GPU合成，SVG转换时HTML散点图概念的点是不可行的）以及定位元素一样：CSS设计时考虑了声明性属性分配。即，惯用CSS尽量紧凑，因此如果有有有意义的抽象，建议使用适当的选择器封装。如果有关于“只内联样式每个元素”的建议，我会不喜欢，因为这不是好的CSS；下载/解析SSR内容或运行JS需要更长的时间。如果通过常规CSS选择器速度不快，则意味着
calc
s的依赖关系图（DAG）不是以有意识的方式完成的。我还错误地认为
会改变
帮助浏览器优化
calc
/heritation/custom prop update DAG，以使不变量（非
会改变
子图）可以被“锁定”、缓存、物化等。而
属性将发生变化，例如
转换
和my
--zoomX
，
--zoomY
由于节点数量很少（600个DIV点），因此更新成本很低。顺便说一句，实际的过渡不是关键瓶颈，即使立即应用
transform
change，也存在用户阻塞延迟