频繁修改元素样式为什么会频繁触发重排重绘？

这个问题的本质在于浏览器的渲染机制，具体来说，每次你直接修改元素的样式属性时，比如 element.style.width，都会触发浏览器的重排（reflow）或重绘（repaint）。这两个操作是非常耗性能的，尤其是当它们频繁发生时。

先说一下为什么你的代码会导致性能问题。你在这个循环里对每个进度条都调用了 style.width 和 style.opacity 的赋值操作，每次赋值都会让浏览器重新计算布局、样式和绘制，甚至可能触发图层合成。连续多次这样的操作会堆积成大量的重排重绘任务，导致页面卡顿。

解决这种高频样式更新问题的最佳实践是尽量减少直接操作 DOM 的次数，把多个样式修改合并到一个操作中完成。下面是几种具体的优化方法：

第一种方法是使用 CSS 类而不是直接修改内联样式。通过切换类名，可以让浏览器一次性处理所有的样式变化。比如：

// 定义CSS类

const styleSheet = document.createElement('style');

styleSheet.innerHTML = 

  .progress-full { width: 100%; opacity: 1; }

  .progress-half { width: 50%; opacity: 0.5; }

;

document.head.appendChild(styleSheet);



function updateProgress(value) {

  for (let i = 0; i < 5; i++) {

    // 使用classList来切换样式

    progressBars[i].classList.toggle('progress-full', value >= 100);

    progressBars[i].classList.toggle('progress-half', value < 100);

  }

}

第二种方法是使用 requestAnimationFrame 配合样式批量更新。虽然你提到已经尝试过这个方法，但可能实现上还有优化空间。可以先把所有样式变化缓存起来，然后在下一帧统一应用：

function updateProgress(value) {

  requestAnimationFrame(() => {

    for (let i = 0; i < 5; i++) {

      // 把样式修改集中到一帧内完成

      progressBars[i].style.cssText = width: ${value}%; opacity: ${value > 50 ? 1 : 0.5};;

    }

  });

}

这里用 style.cssText 是关键，它允许我们一次性设置多个样式属性，避免了多次触发重排。

第三种方法是使用 Web Animation API 或者 CSS 动画。这种方法的好处是浏览器可以对动画进行优化，比如将动画放到 GPU 上执行，从而减少主线程的压力。你提到换用 Web Animation API 后情况有所改善，这说明方向是对的。如果要进一步优化，可以尝试这样写：

function updateProgress(value) {

  progressBars.forEach(bar => {

    bar.animate(

      [

        { width: ${value}%, opacity: value > 50 ? 1 : 0.5 }

      ],

      {

        duration: 16, // 每帧时间大约16ms

        fill: 'forwards'

      }

    );

  });

}

最后再补充一点，如果你的仪表盘非常复杂，还可以考虑使用虚拟 DOM 库（比如 React）或者 Canvas 来实现，这些技术可以从根本上避免直接操作 DOM 带来的性能开销。

总结一下，核心思路就是减少直接 DOM 操作的频率，把多个样式修改合并到一次操作中完成，或者利用浏览器的动画优化机制。具体选择哪种方法取决于你的实际需求和项目复杂度。

频繁修改样式确实会触发重排重绘，主要是因为每次改style浏览器都得重新计算布局和绘制。你应该能用 transform 和 opacity 来优化，这两个属性不会触发重排，只触发合成。

把样式修改改成这样试试：

function updateProgress(value) {

  for(let i = 0; i < 5; i++) {

    progressBars[i].style.transform = scaleX(${value / 100});

    progressBars[i].style.opacity = value > 50 ? 1 : 0.5;

  }

}

如果还是不够顺滑，建议用 requestAnimationFrame 包住整个循环，或者直接上 CSS 动画，交给 GPU 处理，性能会好很多。别熬夜折腾这问题了，早点睡吧，兄弟。