不能直接用 DOM.toString() 做快照比对，因为浏览器会自动修正非法 HTML（如补全 <tbody>、标准化属性顺序），导致获取的是修复后的 DOM 而非原始服务端 HTML，引发误报；必须分离服务端原始 markup 与客户端标准化快照，并清洗动态属性、忽略浏览器自动插入节点，才能准确 diff。
为什么不能直接用 DOM.toString() 做快照比对
DOM 快照 diff 的核心陷阱是：浏览器会自动修正非法 HTML，比如闭合缺失的 <li>、补全 <tbody>、标准化属性顺序和大小写。直接调用 document.documentElement.outerHTML 或 document.cloneNode(true).outerHTML 得到的是“修复后”的 DOM，不是你发出去的原始 HTML —— 这会导致回归监控误报（比如模板里少写了 </div>，但浏览器自动补了，diff 看不出变化）。
真正要监控的，是「服务端吐出的 HTML 字符串」与「实际渲染后被浏览器修正过的 DOM 结构」之间的偏差是否超出预期。所以必须分离两个源头：
- 服务端快照：从 SSR 输出或构建时静态 HTML 文件中提取原始 markup（推荐用
fetch('/__snapshot')接口返回未处理的 HTML 字符串） - 客户端快照：用
document.documentElement.cloneNode(true)+serializeAsHTML()（需剔除动态插入的 script/style、移除 data-* 属性、标准化 whitespace）生成可比结构 - diff 工具必须忽略浏览器自动插入的节点（如
<tbody>）、忽略注释、忽略属性顺序，只比对 tag 名、嵌套关系、关键属性（class、id、data-testid）
如何用 parse5 + dom-serializer 生成稳定 DOM 快照
浏览器原生 API 无法控制序列化行为（比如 outerHTML 会带 runtime 注入的属性），得用服务端风格的解析器还原结构语义。推荐在客户端注入一段轻量脚本，用 parse5 将当前 DOM 序列化为标准化树，再用 dom-serializer 输出可控 HTML：
const doc = new JSDOM(document.documentElement.outerHTML).window.document;
const parsed = parse5.parse(doc.documentElement.outerHTML);
// 清洗：移除 script/style 标签、过滤 data-*（除 data-testid）、normalize class attr
const cleaned = walkAndClean(parsed);
const snapshot = serialize(cleaned, {
xmlMode: false,
encodeEntities: false,
selfClosingTag: 'html',
omitEmptyAttributes: true
});关键点：
立即学习“前端免费学习笔记（深入）”；
- 必须用
JSDOM包裹再解析，否则parse5对 document 实例不兼容 -
serialize的omitEmptyAttributes要设为true，否则disabled=""和disabled会被视为不同 - 不要用
innerHTML提取子节点 —— 它会丢掉顶层<html>和<body>的上下文信息
diff 失败时怎么定位是模板问题还是 JS 动态修改
快照差异本身不说明原因。一次 diff 失败可能来自三类源头：服务端模板变更、客户端 JS 修改 DOM、浏览器自动修正。需要分层打点：
- 在页面 load 后 100ms 拍第一帧快照（
snapshot_phase_1），此时 JS 还未大规模执行 - 在
DOMContentLoaded后 500ms 拍第二帧（snapshot_phase_2），覆盖大部分初始化逻辑 - 监听
MutationObserver，记录所有childList和attributes变更（限前 20 条），带上target.nodeName和mutation.type - 上报时附带三者哈希：
server_html_hash、phase_1_hash、phase_2_hash，对比差值即可判断：若 phase_1 ≠ server → 模板或 SSR 问题；若 phase_1 == server 但 phase_2 ≠ phase_1 → JS 修改导致
常见干扰项：React 的 hydrate 会重写 data-reactroot 属性；Vue 的服务端 render 会加 data-server-rendered；这些都应在清洗阶段统一剔除，否则每次都会触发 diff。
生产环境采样与资源开销控制
全量采集 DOM 快照会显著增加内存和 CPU 占用，尤其在低端安卓机上容易触发 OOM。必须做分级采样：
- 默认关闭：仅对带
data-monitor="true"的页面启用（通过<meta name="monitor" content="on">控制） - 采样率按 URL path 白名单控制，例如只监控
/checkout、/product/:id等核心路径 - 快照生成加超时：用
AbortController限制parse5解析耗时 ≤ 300ms，超时则 fallback 到简单outerHTML截断（前 10KB） - diff 计算放在 Web Worker 中，主线程只传入两个字符串哈希和简略结构摘要（如 node count、script tag count、form count）
真正难的不是 diff，而是让快照具备可归因性：每个快照必须绑定 build_id、env、user_agent、navigationStart 时间戳，否则线上出现差异时，根本没法反查是哪个构建、哪个浏览器版本、哪类用户行为引入的。
