如何在一次操作中使用JavaScript更新多个CSS属性

Question

假设我在样式表中有以下CSS规则:

.demo-rule {
--custom-prop-1: 12px;
--custom-prop-2: 54px;
width: 100%;
height: 100%;
/* several more properties are set here */
}

现在，该规则应用于多个HTML元素，我想使用JavaScript重新计算和重新分配两个自定义CSS属性--custom-prop-1和--custom-prop-2的值。目前，我首先在样式表中获取相应规则的样式，如下所示:

const style = this.shadowRoot.styleSheets[0].rules[0].style;

一旦我得到，我计算和设置这些属性的值:

const valueProp1 = /* calculation */;
const valueProp2 = /* calculation */;
style.setProperty("--custom-prop-1", valueProp1);
style.setProperty("--custom-prop-2", valueProp2);

我看到的问题是我编辑了两次样式。这个可能会迫使web浏览器的渲染引擎重新计算布局两次。我想在一个原子操作中改变这两个属性来防止这种情况。这可能吗?

Answer 1

这可能会迫使web浏览器的渲染引擎重新计算两次布局。

它不会。浏览器将等待JS完成，直到JS到达一个"停止点"，它才能渲染，例如下面，我们等待半秒来做任何事情(只是让初始div渲染)，然后将其更改为蓝色背景，然后有一个繁忙的循环，应该需要一段时间，然后将其变为绿色。你永远不会看到蓝色的div

setTimeout(() => {
const test = document.getElementById('test');
test.style.background='blue';
for (let i = 0; i < 10000000; i++) {
test.style.background='green';
}
}, 500);

#test {
width: 10px;
height: 10px;
background: red;
}

<div id="test"></div>

Answer 2

由于这两个道具都有各自的值，因此您需要分别更新它们。我能想到的唯一方法是你不必这样做，是让他们在你通过javascript同时编辑的页面上的样式标签声明，然后再把它们放回页面上。说了这么多，我觉得你可能对优化这个有点太担心了。如果您像上面那样更改这些值而遇到性能问题，我会感到非常惊讶。