这是一个有点笼统的问题。
有人知道在给定文档中使用许多CSS变量对性能的影响吗？有人做过测试吗？
与变量关联的元素是否对性能有影响？例如，是否所有变量都分配给 <select class="custom-select" disabled id="sellersAssetsCombobox" onchange="getAssetDetails(this)">
<option value="0" selected="" >Open this to select Seller`s assets</option> <!--I want to change this value-->
<option value="1">Code: 15524 -> Value: 366 ETH</option>
<option value="2">Code: 74121 -> Value: 841 ETH</option>
<option value="3">Code: 66473 -> Value: 510 ETH</option>
</select>而不是将其分配给可能仅使用它们的样式块来阻止性能？
答案 0 :(得分：2)
是的，已经完成了测试。本质上，您是通过JavaScript应用CSS更改并评估性能的。
您将要了解有关对CSS变量进行范围界定以及受影响的元素数的信息。随着这些数字的增加，绘制时间也会增加。
https://lisilinhart.info/posts/css-variables-performance/上有一篇关于该主题的方便文章
TL; DR 请注意样式的重新计算，因为CSS变量是可继承的-在父级上更改变量可能会影响许多子级 倾向于使用单个类作为元素，以使浏览器更容易进行样式计算 calc（）在变量方面具有良好的性能，但在某些单位（例如deg或ms）上的浏览器支持方面仍然存在问题 宁愿使用setProperty而不是内联样式来在JavaScript中设置CSS变量
还有另一句话：
通过Javascript –bg变量首先在.container父元素上设置，这导致相当长的持续时间为76ms。然后在第一个子.el上设置相同的变量，该子仅持续约1.9ms。因此，父元素使用此变量的子级越多，在该元素上设置CSS变量的成本就越高。