重点是「谁变了、怎么变的、何时变的」；需用MutationObserver捕获原子变更，结合时间戳、节点路径和事件上下文结构化归档，而非低效失真的innerHTML快照。
大规模前端监控里，DOM 结构变动本身不是重点——重点是「谁变了、怎么变的、何时变的」。直接序列化整个 document 或靠 innerHTML 快照，既撑不住量级，又丢掉操作语义和时序因果。真要可靠录制与还原，得用 MutationObserver 捕获原子变更，再结合时间戳、节点路径和事件上下文做结构化归档。
为什么不能只用 innerHTML 或 DOM 快照？
快照式录制在小页面能跑通，但一到真实业务场景就崩：单页应用频繁重渲染，innerHTML 体积爆炸；diff 算法无法区分「用户主动点击触发的变更」和「框架内部 reconcile 导致的无意义重绘」；更关键的是，快照之间没有操作链路，回放时只能跳帧，根本看不出「按钮点击 → 表单展开 → 请求发出 → 加载中状态 → 数据填充」这个过程。
- 每次快照平均 200–500KB，10分钟会话轻松超 10MB，上传失败率飙升
-
document.cloneNode(true)会丢失绑定事件、Canvas 内容、WebGL 状态、表单输入值（value属性不等于 DOM 属性） - React/Vue 的虚拟 DOM 更新不会触发
innerHTML变化，但真实 UI 已变——快照完全失真
MutationObserver 录制必须带哪些字段？
光监听 MutationObserver 不够，必须为每条记录注入可追溯的上下文。rrweb 的实践已验证有效，核心字段缺一不可：
-
type：固定为"mutation"，和"input"、"scroll"等事件类型对齐 -
adds/removes：只存新增/删除节点的node.id或node.tagName + node.className路径，不存完整 HTML -
textContent：仅当文本节点被修改时记录新值（避免录空格、换行等噪声） -
timestamp：用Date.now()，不是performance.now()—— 后者无法跨设备对齐回放时间轴 -
source：标明变更来源，如"user"（点击触发）、"network"（fetch 回调）、"timer"（setTimeout），这对定位竞态问题至关重要
回放时 DOM 还原最容易卡在哪？
还原不是「把变更倒着执行一遍」，而是按时间戳重建节点关系。常见卡点有三个：
立即学习“前端免费学习笔记（深入）”；
- 动态插入的节点没父容器：比如
document.body.appendChild(el)被录下来了，但回放时body尚未 ready，需加document.readyState === "complete"守卫或延迟挂载 - 样式依赖未加载：
link[rel="stylesheet"]插入后立即改 class，但 CSSOM 未就绪，回放时元素无样式。解决方案是监听load事件后再触发后续 mutation - 第三方脚本干扰：广告 SDK、埋点脚本可能篡改 DOM，但没进录制流。建议在录制前用
Object.freeze(document)冻结关键 API，或用rrweb的blockClass配置屏蔽非业务区域
真正难的不是录，是让每一条 mutation 在回放沙箱里「像当时一样生效」——这要求录制时就预判执行环境差异，而不是指望回放时强行模拟。节点 ID 冲突、异步时机偏移、CSS 优先级覆盖……这些细节不提前兜底，回放就会变成「看起来差不多，但行为不对」。
