许多 CSS 变量对性能的影响

Posted 2023-02-23

【中文标题】许多 CSS 变量对性能的影响

【英文标题】：Effect of Many CSS Variables on Performance

【发布时间】：2019-10-23 04:15:52

【问题描述】：

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

有人知道在给定文档中使用吗？有人做过测试吗？

与变量关联的元素对性能有影响吗？例如，将所有变量分配给:root，而不是将它们分配给可能只使用它们的单个样式块，是否会更严重地阻碍性能？

【参考方案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 变量的开销就越大。

【讨论】：

FWIW 我尝试平滑transition: transform（平移、缩放、强制将其放入具有背面/translate3d 的 GPU）大约 600 个微小尺寸的 DOM 元素，基本上是点。我的 Ipad Air 2 上的过渡约为 60FPS。但在过渡开始之前它会挂起 1-2 秒。感觉 OOM 1k 基本数学运算需要 1-2 秒，这非常糟糕。这需要仔细定位约 600 个 DOM 元素（具有背景颜色的 4px4px 空 DIV，即 html 散点图概念的点，因为 SVG 转换是行不通的，因为在 webkit 或其他浏览器中没有 GPU 合成）

至于定位元素：CSS 在设计时考虑到了声明性属性分配。 IE。惯用的 CSS 试图紧凑，所以如果有有意义的抽象，鼓励适当的选择器封装它。如果有关于“仅对每个元素进行内联样式”的建议，我会不喜欢它，因为那不是好的 CSS；下载/解析 s-s-r 内容或运行 JS 需要更长的时间。如果通过普通的 CSS 选择器速度不快，那么这意味着 calcs 的依赖关系图 (DAG) 没有以一种有意识的方式完成

我还错误地假设 will-change 帮助浏览器优化 calc/inheritance/custom 属性更新 DAG 使得不变量（非will-change 子图）可以“锁定”、缓存，物化等，而 will-change 道具即。 transform 和我的 --zoomX、--zoomY 更新成本很低，由于节点数量微不足道（600 DIV 点），计算上应该是这样。顺便提一句。实际过渡补间不是关键瓶颈，即使立即应用 transform 更改也会出现用户阻塞延迟