dom崩溃是html解析器级故障，不触发js异常，sentry无法捕获；表现为白屏/卡死、主线程100%占用、控制台无报错；需通过节点数监控、轻量快照、api劫持等手段主动防控。
DOM崩溃不是JS异常，别往Sentry里塞
浏览器遇到严重HTML结构错误（比如嵌套错乱导致解析器卡死、<script></script>写在里却操作document.body）时，可能直接触发DOM树重建失败或主线程冻结，但不会抛出ErrorEvent，也不会触发window.onerror。Sentry、Bugsnag这类工具完全收不到信号——它们只监听JS异常流，而DOM崩溃发生在更底层的HTML解析器阶段。
真实现象是：页面白屏/卡死/部分区域不响应，控制台空空如也，Network面板显示资源全加载成功，Performance里看到主线程长时间100%占用。这时候翻日志、查接口、看Sentry全是徒劳。
- 用
performance.memory或window.getComputedStyle(document.documentElement)做心跳检测？没用——DOM崩溃时这些API可能直接返回null或抛TypeError，但错误被静默吞掉 - 靠
MutationObserver监听变化？它自身依赖DOM正常运行，崩溃时observer回调根本不会触发 - 真正能提前暴露风险的，只有
$$('*').length持续线性上涨+Performance中Nodes曲线回落异常——这是泄漏演变成崩溃前最后的可测信号
用requestIdleCallback + document.documentElement.cloneNode(true)做轻量快照
想在生产环境低成本捕获DOM劣化，不能依赖Puppeteer这类重型方案。核心思路是：在主线程空闲时，对当前DOM做一次“拓扑快照”，比对节点数量与结构特征，而非渲染截图或字符串序列化。
关键不是存全量HTML，而是提取可量化、低开销的指标：
- 执行
$$('*').length并记录时间戳，每30秒采样一次，差值>200且连续3次上升即告警 - 用
document.documentElement.cloneNode(false)快速复制根节点（不含子节点），再检查clone.children.length是否为0——若为0，说明documentElement已被清空或替换，大概率发生过强制重载或脚本覆盖 - 对
document.head和document.body分别做childElementCount快照，突变值>50%需标记为高危
注意：cloneNode(true)在大型DOM上会阻塞主线程，必须用requestIdleCallback包裹，且设置timeout: 1000兜底；超时就跳过，宁可漏报不可卡顿。
document.write和第三方SDK注入是DOM崩溃主因
线上DOM崩溃80%以上源于document.write调用或未隔离的第三方SDK（广告、埋点、客服组件）。它们常在异步回调里执行document.write('xxx')，或直接document.body.innerHTML = htmlStr，导致整个DOM树被暴力重置，原有事件监听器、数据绑定、Shadow DOM全部丢失。
自研插件必须主动拦截这两类行为：
- 重写
document.write和document.writeln：保存原函数，在调用前检查document.readyState !== 'loading'，是则直接console.warn并上报堆栈 - 监听
document.body的innerHTML赋值：用Object.defineProperty劫持setter，记录变更前后childElementCount差值，>100立即告警 - 对已知高危SDK（如某广告JS）做
document.createElement拦截：当tagName === 'script'且src匹配/ad\.js$/i时，打上data-spy="ad-inject"标记，后续校验其插入位置是否在合法范围内
快照比对时最易忽略的保留路径陷阱
用Chrome Memory面板拍Heap Snapshot对比Detached HTMLDivElement时，Retaining path里显示的“最长路径”往往不是真凶——真正该盯的是路径末尾那个非系统引用。
比如路径是：Window → cacheMap → Map → key → element，问题不在cacheMap这个变量名，而在key是否被正确清理。很多团队修复时只删element，却忘了cacheMap.delete(key)没执行。
另一个隐形坑：IntersectionObserver实例没调disconnect()，路径显示为IntersectionObserver → callback → closure → element。但实际只要在组件卸载时补一句io.disconnect()就能释放，没必要重写整个观察逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
