改style属性易触发重排，因布局相关属性赋值会强制同步计算；切换className则依赖预设CSS规则，更易批量优化、复用性强且不易引发强制同步布局。
直接改 style 属性容易触发重排，而切换 className 通常更安全——关键不在“改什么”，而在“怎么改”以及是否引发布局强制计算。
style 直接赋值常悄悄触发重排
给元素写 element.style.width = '200px' 或 element.style.left = '10px'，浏览器必须立刻验证该变更是否影响几何布局。哪怕只是改一个属性，只要它属于“布局相关属性”（如 width、height、top、left、margin、padding、display、font-size 等），浏览器就可能启动样式重计算 + 布局重排流程。
- 每次赋值都可能被单独加入渲染队列，若连续多次修改（比如循环里反复设
style.top和style.left），浏览器大概率不会合并，而是逐次处理 - 如果紧接着读取
offsetHeight或getBoundingClientRect()，浏览器会强制清空队列、同步执行重排，返回最新值——这就是“强制同步布局”，性能杀手 - 内联样式优先级高，但缺乏复用性；单个元素上大量
style.xxx = yyy操作，等价于手动绕过 CSSOM 批量优化机制
className 切换一般只触发重绘或轻量重排
通过 element.className = 'active' 或 element.classList.toggle('highlight') 修改类名，本质是告诉浏览器：“请按已定义好的 CSS 规则重新匹配样式”。只要目标 class 中的声明不涉及几何变更，就只走样式重计算 → 重绘路径。
- 预设在 CSS 文件里的规则（如
.active { color: blue; }）已在首次解析时构建好 CSSOM，切换类名只是激活/停用已有规则，开销小 - 即使 class 里包含
width或transform，浏览器仍可批量处理多个类变更，比逐条 style 赋值更容易被队列合并 - 推荐用
classList而非直接覆写className，避免覆盖其他动态添加的类，也更语义清晰
真正决定重排与否的是属性类型，不是修改方式
改 style.color 和加 class="text-red" 效果一致，都只重绘；但改 style.width 和加 class="wide"（含 width: 300px）效果也一致，都可能重排。区别在于：
立即学习“Java免费学习笔记（深入）”；
-
style写法无法复用，易写错单位、漏写分号，且 JS 中拼字符串风险高 -
className把样式逻辑交给 CSS，利于缓存、压缩、媒体查询和开发者协作 - 现代浏览器对 class 切换做了较多优化（比如跳过未变化的规则匹配），而对高频 style 赋值优化有限
一个实用判断口诀
问自己两个问题：
- 这个改动会不会让元素在页面中“占的地方”变大、变小、挪位置？→ 是，则大概率重排；否，则大概率只重绘
- 我是不是在一次 JS 执行中，又写又读布局属性（比如先设
style.top，再取offsetTop）？→ 是，立刻打断队列，强制同步重排
