MutationObserver 通过微任务机制批量处理 DOM 变更，减少重排重绘；需配合 DocumentFragment 或一次性写入，并避免在回调中读取布局信息，必要时用 requestAnimationFrame 获取尺寸，及时 disconnect 并缩小观察范围以优化性能。

MutationObserver 本身不直接避免重绘，但它通过微任务队列机制，为“批量处理 DOM 变更”创造了关键条件——把多次零散的 DOM 变动收拢到一次同步更新中，从而减少重排重绘次数。

微任务天然聚合多次变更

当连续触发多个 DOM 操作（比如一次性插入 3 个节点、修改 2 个属性），MutationObserver 不会为每次变动立刻执行回调，而是等当前宏任务结束、进入微任务阶段时，把所有累积的变更打包成一个 mutationsList 数组统一派发。这意味着：

• 哪怕 10 次 appendChild，也只触发一次回调
• 回调里拿到的是完整变更快照，便于去重、合并或延迟处理
• 避免了在同步代码中反复读写 DOM 引发的强制同步布局

配合批量写入，跳过中间渲染

仅靠监听不够，关键在回调里怎么做。要真正减少重绘，得把 DOM 写入操作也控制在单次微任务内：

宝塔Linux面板11.3.0

宝塔面板11.3.0是一款针对Linux服务器设计的可视化管理工具，通过重构核心模块实现资源占用显著降低，尤其适合低配置服务器环境。它将复杂的命令行操作转化为直观的图形界面，帮助开发者快速完成网站部署、环境配置及日常运维工作，无需专业技术背景即可高效管理服务器。

下载

• 不要在回调里逐个操作节点（如循环调用 node.classList.add）
• 改用 DocumentFragment 或临时缓存状态，最后一次性挂载或应用
• 例如：收集所有待添加 class 的节点，统一用 element.className = newClassStr 替代多次 classList.add

避开布局抖动陷阱

微任务虽快，但若在里面读取布局信息（如 offsetHeight、getBoundingClientRect()），浏览器会立即触发同步重排，破坏聚合效果：

• 确保回调逻辑只做“记录”和“准备”，不读取任何几何属性
• 真需要尺寸数据，放到 requestAnimationFrame 里——它在下一次渲染帧前执行，且能拿到最新布局
• 典型组合：queueMicrotask 收集变更 → requestAnimationFrame 批量写入 → 渲染

及时清理与按需观察

长期监听会持续积累 MutationRecord，尤其在低代码画布等高频场景下容易内存膨胀：

• 用完即停：observer.disconnect() 移除不需要的监听
• 缩小观察范围：用 attributeFilter 锁定关键属性，避免响应无关 class/style 变更
• 目标节点尽量具体，避免 subtree: true 监听整个 document