合并DOM操作可显著降低重排次数：用DocumentFragment批量插入、cssText或class类批量改样式、微任务聚合变更、高频修改前移出文档流。
合并 DOM 操作是降低重排（Reflow）次数最直接有效的手段。浏览器每次重排都要重新计算元素几何位置、布局关系和渲染树，开销大且阻塞主线程。而零散的 DOM 变更——比如循环中逐个插入、反复修改样式——会不断触发重排。把多次操作“攒起来”，一次性提交，就能把几十次重排压成一次。
用 DocumentFragment 批量插入节点
在内存中组装节点，避免中间状态暴露给渲染引擎：
- 调用 document.createDocumentFragment() 创建轻量容器
- 所有新创建的元素（
createElement）都先 appendChild 到这个片段里 - 最后只执行一次真实父节点的 appendChild(fragment)
例如向列表添加 100 个 <li>，逐个插入会触发 100 次重排；用 Fragment 后仅触发 1 次，实测首屏时间可从约 800ms 降至 150ms 左右。
合并样式变更，避免逐条赋值
连续设置 el.style.width、el.style.margin 等属性，每次都会强制同步计算布局：
- 改用 el.style.cssText = 'width:100px;margin:12px;background:#fff;'，单次写入全部样式
- 更推荐预设 CSS 类（如
.card-active），再通过 el.classList.add('card-active') 切换 - 类名方式由浏览器底层高效处理，也利于复用、维护和 CSS 隔离
借助微任务收拢变更时机
利用 queueMicrotask 或 Promise.resolve().then，把同一轮事件循环中的多次 DOM 修改聚合执行：
- 多次调用
queueMicrotask(() => {...})，最终只批量执行一次 - 可在微任务内部做状态合并：保留最后一次输入值、跳过中间过渡态、去重插入节点
- ⚠️ 注意：不要在微任务中读取
offsetHeight、getBoundingClientRect()等布局信息，否则会强制同步回流，抵消优化效果
高频修改前移出文档流
对已有元素做复杂或频繁更新时，先让它暂时脱离渲染流程：
- 用 element.remove() 从 DOM 中移除，或设 element.style.display = 'none'
- 完成所有结构、内容、样式的修改后，再统一插入或恢复显示
- 这样整个修改过程不参与当前帧的布局计算，彻底规避中途重排
不复杂但容易忽略。关键不是“少操作”，而是“让操作更集中、更可控”。
