DOM Snapshot不能直接用outerHTML，因其返回浏览器修正后的渲染结果而非原始结构，会掩盖服务端漏渲染、CDN脏缓存、运行时移除的data-testid等问题；线上需分层捕获结构、状态、行为三层，并等待关键资源就绪后快照。
DOM Snapshot比对为什么不能直接用 outerHTML
直接取 document.documentElement.outerHTML 做快照比对，在线上环境几乎必然误报。它返回的是浏览器解析修正后的 DOM 字符串，会自动补全自闭合标签、重排属性顺序、合并 class 空格、甚至把 JS 动态插入的节点也“固化”进去——你看到的不是原始结构，而是渲染结果。比如灰度页里 document.getElementById("pay-btn") 返回 null，但 outerHTML 里明明有这个 ID，因为 JS 没执行完或 feature flag 未生效，快照却已生成。
- 服务端模板漏渲染、CDN 缓存脏 HTML 会被
outerHTML完全掩盖 -
data-testid被 React/Vue 运行时移除，字符串里还在，DOM 里已消失 - 第三方 SDK 插入的
<div class="ad-banner"></div>不带闭合标签，outerHTML自动补全，看不出问题
线上环境真正可用的 DOM Snapshot 必须分层捕获
线上 HTML 是动态的，时间戳、随机 ID、表单值、滚动位置都会污染快照。不能存一整段 HTML 字符串，而要拆解为结构 + 状态 + 行为三层，只捕获可复现、可预期的字段。
- 结构层：用
container.querySelectorAll('[data-testid]').length验证关键组件是否渲染，不依赖 class 名或嵌套深度 - 状态层：手动提取
input.value、textarea.value、select.selectedIndex、checkbox.checked，再JSON.stringify存为纯数据 - 行为层：不快照按钮点击效果，而是监听
click后检查document.activeElement或 URL 变更 - 含
<canvas></canvas>时，必须调用canvas.toDataURL()，而非依赖outerHTML
MutationObserver 监听灰度变更时容易踩的坑
灰度发布常伴随运行时 JS 注入（实验逻辑、AB 测试 SDK），只 snapshot 一次远远不够。但监听方式不对，会带来性能问题或漏判。
- 别监听
document.body全局，开销大且噪声多；锁定影响范围，如#app或[data-env="gray"] -
subtree: true必须开启，否则子级插入不触发 - 避免在回调里做
deepEqual整树比对；优先用轻量判断：node.hasAttribute('data-experiment')、node.classList.contains('order-summary') - 监听后 5 秒自动
disconnect()，防止长期驻留影响页面生命周期
快照比对前必须等 DOM 真正就绪
线上环境 JS 加载异步、feature flag 初始化延迟、埋点 SDK 注入不可控。没等关键资源就拍快照，等于拿半成品做断言。
立即学习“前端免费学习笔记（深入）”；
- 不能只等
DOMContentLoaded；需额外等待window.__FEATURE_FLAG_READY__或类似全局标记 - 第三方 SDK 加载完成后再触发快照，可通过
performance.getEntriesByType('resource')过滤出关键脚本 - 若页面含 CSP
connect-src限制，fetch(location.href)可能失败，退而求其次：从script[type="application/json"]提取原始片段作校验锚点
