用style修改样式和用class切换样式，哪种重排更少？

在大多数情况下，用 class 切换样式比用 style 直接修改样式的重排次数更少，原因如下：

核心原因：浏览器的渲染队列优化

浏览器会维护一个“渲染队列”，将短时间内的多次样式修改合并为一次重排/重绘，以优化性能。但两种方式对队列的利用效率不同：

1. 用 class 切换样式：
   一次 class 切换会触发所有关联样式的批量更新，浏览器会将这些样式变化合并到渲染队列中，仅触发一次重排（如果涉及布局属性）。
   例如：

   .active {
         width: 200px; height: 100px; margin: 10px; }
   

   element.classList.add("active"); // 一次操作，合并所有样式变化 → 1次重排
   

2. 用 style 直接修改样式：
   若通过 element.style.xxx 逐条修改样式（尤其是布局属性），浏览器可能无法完全合并这些操作，导致多次重排。
   例如：

   // 多次单独修改，可能触发多次重排（取决于浏览器优化程度）
   element.style.width = "200px";
   element.style.height = "100px";
   element.style.margin = "10px";
   

   虽然现代浏览器会尽力合并 style 修改，但如果在修改过程中插入了布局属性读取（如 offsetWidth），会强制触发重排，打破合并逻辑，导致更多重排。

极端情况：单次 style 修改 vs 单次 class 切换

如果仅修改一个样式属性，两种方式的重排次数相同（均为 1 次）。
例如：

// 1次重排
element.style.width = "200px";

// 同样1次重排
element.classList.add("width-200"); // .width-200 { width: 200px; }

结论：优先用 class 切换样式

• 重排次数更少：class 切换能确保所有样式变化被合并，避免多次重排。
• 可维护性更高：样式集中在 CSS 中，便于管理和复用，减少代码冗余。
• 规避强制同步布局：class 切换不会像零散的 style 修改那样，容易因插入布局读取而触发额外重排。

唯一例外是单次简单样式修改（如仅改一个颜色），此时两种方式性能差异可忽略，但 class 仍更推荐用于代码规范。