MutationObserver 是结构变动录制的唯一可行入口，因其能精准拦截插入、移除、属性变更等底层操作，支持批量合并、异步回调和细粒度过滤，而事件监听和已废弃API均无法满足需求。
为什么 MutationObserver 是结构变动录制的唯一可行入口
DOM 结构变化无法靠事件监听捕获，click、input 等只反映用户意图，不反映最终 DOM 树形态；而 document.addEventListener('DOMSubtreeModified') 已废弃且性能灾难。只有 MutationObserver 能在浏览器渲染管线中精准拦截插入、移除、属性变更等底层操作，且支持批量合并、异步回调、细粒度过滤。
但直接监听 document 或 document.body 会混入广告脚本、统计 SDK、热更新注入等无关变更，导致录制体积爆炸、回放失真。真实场景必须限定目标容器，且该容器需满足两个硬条件：
-
editor必须是已挂载的Element，editor.isConnected === true -
editor不能是shadowRoot或文档片段（nodeType !== 1）
childList + subtree 是结构录制的最小必要配置
只设 childList: true 会漏掉用户粘贴带嵌套结构的 HTML（如 <div><p>文本</p></div>），因为 MutationObserver 默认只观察目标节点的**直接子节点**；深层节点插入属于“间接变更”，必须开启 subtree: true 才能递归捕获。
常见错误配置：{ childList: true } → 漏掉 70%+ 的粘贴/拖拽/格式化操作；{ subtree: true } 单独启用 → 不触发任何回调（缺少 childList 或 characterData 时，subtree 无效）。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 始终用
{ childList: true, subtree: true, attributes: true, characterData: true }启动观察器 - 若只关心结构增删（忽略文本和属性），可关掉后两项，但需明确接受“看不到 class 切换、看不到输入内容变更”
- 不要依赖
mutation.type === 'childList'判断是否为结构变更——attributes和characterData变更也可能伴随节点插入（如innerHTML = 'xxx'）
如何压缩结构变动记录而不丢失还原能力
原始 MutationRecord 对象包含大量冗余字段（如 removedNodes 中的完整节点树、target 的整个父链），直接序列化会导致单次粘贴生成数 MB 日志。关键压缩点在于：
- 只保留
type、addedNodes和removedNodes的nodeName、textContent（仅对 Text 节点）、attributes（仅存变更的 key-value 对） - 用相对路径替代
target引用：将所有节点映射到编辑器根节点下的扁平索引（如0.2.1表示根节点第 0 子节点的第 2 子节点的第 1 子节点） - 合并连续同类型操作：相邻的多次
insertBefore可合并为一次appendChildren，避免回放时频繁重排
注意：删除操作不可合并，必须保留精确顺序和上下文，否则回放时可能因父节点已被删导致 removeChild 失败。
还原时 DOM 构建必须绕过浏览器默认解析逻辑
直接用 el.innerHTML = snapshotHtml 会触发浏览器重新解析、执行 script、加载图片，不仅慢，还会污染全局作用域、触发副作用。正确做法是用 document.createElement() + appendChild() 逐层重建，且严格按录制时的节点顺序和父子关系执行。
难点在于 Text 节点还原：浏览器会自动合并相邻 Text 节点，但录制时可能拆成多个。回放必须保留原始分段，否则影响光标定位和 undo/redo 行为。解决方案是：
- 在录制时对每个 Text 节点打上唯一 ID，并记录其父节点路径
- 回放时用
document.createTextNode(text)创建独立节点，再按路径插入 - 禁止使用
textContent批量赋值，避免隐式合并
最易被忽略的是节点引用失效问题：录制时的 Node 实例在回放沙箱中不存在，所有节点操作必须基于新创建的 DOM 实例，不能复用旧引用或依赖 node.isConnected 判断。
