批量隐藏/显示上百个DOM元素：修改STYLE还是CLASS更优？

三种实现方案的优劣对比 #

1. 直接修改元素style属性 #

// 隐藏后仍占原有空间
elem.style.visibility = 'hidden' 
// 隐藏后不占空间
elem.style.display = 'none'

• 优势：写法简单无需提前定义CSS类，单个元素调整灵活度高
• 劣势：批量操作时每修改一个元素的style都会触发一次独立的样式重计算，元素数量多的时候CPU占用会大幅上升，重绘/重排次数多，非常容易阻塞UI线程，且样式硬编码在JS逻辑中，后续维护成本高。

2. 操作元素classList增删类 #

// JS 逻辑
elem.classList.add('hidden')
// 对应CSS
.hidden {
  visibility: hidden;
  /* display: none; */
}

• 优势：样式与逻辑分离，可维护性强，浏览器对类名变更的样式优化比零散修改style更好，同等元素数量下重计算次数更少。
• 劣势：批量操作仍需要遍历所有目标元素逐个执行类名增删，当元素量级达到数百上千时，遍历本身就会产生可观的CPU开销，低性能设备上仍可能出现卡顿。

3. 直接修改CSS规则（你提到的第三种方案） #

这不是hack，完全符合W3C标准，CSSStyleSheet API在IE9及以上所有主流浏览器都兼容，没有跨浏览器问题。
实现示例：

// 获取页面所有样式表，也可以新建一个独立的动态样式表
const styleSheet = document.styleSheets[document.styleSheets.length - 1];
let ruleFound = false;
// 遍历找到目标类对应的规则
for (let rule of styleSheet.cssRules) {
  if (rule.selectorText === '.your-target-class') {
    rule.style.visibility = 'hidden';
    ruleFound = true;
    break;
  }
}
// 没有找到对应规则就新增一条
if (!ruleFound) {
  styleSheet.insertRule('.your-target-class { visibility: hidden !important; }', styleSheet.cssRules.length);
}

• 优势：批量操作性能是三者中最高的，仅需要修改一次CSS规则，浏览器会自动同步所有匹配该选择器的元素样式，不需要遍历元素，CPU使用率极低，仅触发一次全局样式重计算，重绘延迟最小，几乎不会阻塞UI线程，非常适合大量同规则元素的统一显隐控制。
• 劣势：灵活性差，无法给单个元素做差异化的显隐控制，修改全局样式表如果没有做好规则隔离容易出现样式冲突，调试难度稍高，动态修改的规则不会直接展示在元素的inline样式里，需要到样式表面板中查看。

选型建议 #

• 操作10个以内元素：优先选classList方案，可维护性最好，性能差距完全感知不到
• 操作几十到上百个元素：classList方案足够用，性能表现达标
• 操作上百上千个同规则元素：优先选择修改CSS规则的方案，在低性能设备上的流畅度优势非常明显

ℹ️ 补充说明：opacity、transform这类可以触发GPU加速的属性也可以用来控制可见性，配合修改CSS规则的方案使用，性能会进一步提升，还可以实现平滑的显隐过渡效果。

内容的提问来源于stack exchange，提问作者Inigo