dom快照应等框架就绪信号+dom稳定判断后获取，预处理过滤非业务节点，用结构哈希比对而非字符串diff，ci中需固定渲染参数并设分层容忍阈值。
DOM快照怎么取才稳定可靠
直接用 document.documentElement.outerHTML 拿快照，看似简单，但实际会因动态渲染、CSSOM阻塞、异步资源加载导致内容不一致。尤其在 SPA 场景下，DOMContentLoaded 触发时 React/Vue 的组件可能还没挂载完。
更稳妥的做法是等框架就绪信号 + 节流 DOM 稳定判断：
- React 项目监听
window.__REACT_DEVTOOLS_GLOBAL_HOOK__存在后，再加requestIdleCallback延迟 100ms 取快照 - Vue 3 优先检测
window.Vue或document.querySelector('[data-v-app]')是否已渲染完成 - 通用兜底：轮询检查
document.body.innerHTML连续 2 次无变化（间隔 50ms），再取document.documentElement.cloneNode(true)后序列化，避免样式计算干扰
对比时哪些节点必须忽略
DOM 快照对比不是比“长得像不像”，而是比“结构语义是否退化”。大量噪声来自非业务节点，硬比只会误报。
以下节点类型建议默认剔除（预处理阶段用 NodeIterator 过滤）：
-
script和style标签（含内联style属性值，除非你真要监控 CSS 内联变更） - 带
data-testid、data-cy、aria-label等测试/辅助属性的元素（这些常随测试框架版本变） - 含
class值匹配/\b(ant|el|chakra|mui)-\w+/的节点（UI 组件库动态 class 易变，应归入白名单或单独校验） -
iframe内容（跨域不可读，同域也建议用src或title替代全量比）
diff 算法选 diffhtml 还是手写树比对
用正则或字符串 diff 比 HTML 文本，错一个空格就全崩；用完整虚拟 DOM diff（如 snabbdom）又太重，且无法反映真实渲染结果。
折中方案是基于节点路径做结构哈希比对：
- 对每个保留节点生成唯一路径标识，例如：
body > div#app > main > article:nth-of-type(1) > h2 - 提取关键属性哈希：
nodeName+id+className.split(' ').sort().join(' ')+textContent.trim().slice(0, 64) - 用
JSON.stringify()序列化后crypto.subtle.digest('SHA-256')得短哈希（需在支持环境降级为XXHash） - 只比对哈希集合差异，而非逐节点递归——快 3~5 倍，且天然忽略顺序微调（如两个相邻
span交换位置）
CI 中怎么防止误报和漏报
本地跑通不等于 CI 稳定。常见陷阱是 Puppeteer 启动参数、字体渲染、设备像素比导致 DOM 计算差异。
关键控制点：
- CI 中固定
launch({ args: ['--font-render-hinting=none', '--disable-remote-fonts'] })，禁用远程字体和渲染 hint - 所有截图/快照统一用
emulatedMedia: { media: 'screen', features: [{ name: 'prefers-color-scheme', value: 'light' }] } - 对比阈值不设“0 差异”，而是按节点层级设置容忍度：
、<code>、<code>（表单易受 focus 状态影响） - 首次入库快照必须人工抽检，尤其注意
noscriptfallback、SSR 与 CSR 混合渲染区域
最麻烦的其实是第三方脚本注入的 DOM（比如统计 SDK 插入的 div[data-stat]），它们往往没规律。这类得靠启动前执行 page.evaluate(() => delete window._gaq) 主动清理，而不是指望过滤规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
