重排由几何属性修改立即触发，逐条设置如width、height会多次强制重排；优化需一次性合并：用cssText、预设class切换或display:none隔离后批量修改。
样式合并一次性修改，核心是把多次分散的样式赋值压缩成单次变更，从而把可能触发多次重排（Reflow）的操作降为最多一次。
为什么逐条改样式会频繁触发重排
浏览器对 几何属性（如 width、height、left、top、padding、margin 等）的修改会立即触发重排——因为布局需要重新计算。每次写 el.style.width = '100px'，再写 el.style.height = '200px'，浏览器就不得不两次计算尺寸和位置，中间还可能穿插读取布局信息（比如访问 offsetHeight），进一步强制同步刷新。
三种高效的一次性样式合并方式
1. 使用 cssText 批量赋值
直接覆盖整个内联样式字符串，避免多次解析与应用：
el.style.cssText = 'width: 100px; height: 200px; margin: 10px; background: #f0f0f0;';
2. 用 classList 切换预设 CSS 类
把样式逻辑提前写进 CSS 文件，JS 只负责开关类名，干净又高效：
.card-expanded { width: 300px; height: 200px; padding: 16px; border-radius: 8px; }
el.classList.add('card-expanded');
3. 临时移除元素再批量设置（适合复杂动态样式）
先让元素脱离文档流（如 el.style.display = 'none'），完成所有样式修改后，再恢复显示——这样所有变更在隐藏状态下完成，只在恢复时触发一次重排。
哪些样式修改不会触发重排
如果只改 纯绘制属性（如 color、background-color、opacity、visibility、box-shadow），浏览器跳过布局阶段，仅重绘（Repaint）。这类操作开销小得多，可放心多次设置。但要注意：opacity 配合 transform 还能进一步交由合成器线程处理，彻底避开主线程重排重绘。
立即学习“Java免费学习笔记（深入）”；
容易踩坑的“隐式重排”行为
- 在修改样式前读取 offsetWidth / offsetHeight / getComputedStyle() 等布局信息
- 循环中反复读写同一元素的几何样式（形成“读-写-读-写”模式）
- 用 innerHTML 或 textContent 修改后立刻查询尺寸
这些都会打断浏览器的优化队列，强制同步执行重排，抵消掉样式合并的效果。
