performance.getentriesbytype('resource')无法发现dom节点膨胀，因其仅记录js/css/图片等外部资源加载事件，对document.createelement或innerhtml等纯js操作无感知；必须在domcontentloaded后、performanceobserver监听navigation+paint回调中（需校验readystate和body存在）、spa路由变更后100ms三个时机主动采样，并采用childnodes递归+阈值过滤避免主线程阻塞。
DOM节点数异常无法靠performance.getEntriesByType('resource')发现，必须主动采样并绑定到真实渲染生命周期里，否则监控就是盲区。
为什么PerformanceObserver监听resource类型完全抓不到节点膨胀
performance.getEntriesByType('resource')只返回已加载的外部资源（JS/CSS/图片）记录，对document.createElement或innerHTML += '这类纯 JS 操作毫无感知。哪怕页面动态插入 3000 个div，只要没发新请求，该 API 返回数组长度就是 0。
- DOM 节点增长是 JS 执行结果，不是资源加载事件，
resourceobserver 天然监听不到 -
navigation类型能拿到domComplete，但此时 React/Vue 组件可能还没挂载，useEffect或mounted钩子尚未执行 - 仅在
window.onload后查节点数，会漏掉 SPA 路由跳转后新增的内容（load不重发）
在哪几个时机采样才真正覆盖 DOM 生命周期
单一时机必然失真，必须覆盖静态解析、JS 渲染、路由更新三阶段：
-
DOMContentLoaded后立即执行：捕获初始 HTML 结构，不含 JS 动态插入内容 - 用
PerformanceObserver监听navigation+paint类型，在回调中检查document.readyState === 'complete'且document.body存在时采样——此时首屏关键节点基本就位 - 对 SPA 应用，额外监听
history.pushState或框架路由事件（如router.afterEach），在每次路由变更后100ms再采样（避开组件mounted前的竞态）
怎么避免采样本身拖慢主线程
document.querySelectorAll('*').length 在节点超 10k 时可能触发强制重排，尤其在低端 Android 设备上卡顿明显：
- 别在
requestAnimationFrame回调里执行，它会让统计参与帧渲染流水线 - 改用
document.body?.childNodes.length+ 递归计数（限制深度 ≤ 4），比通配符查询快 3–5 倍 - 上报前加阈值过滤：
if (nodeCount > 1500) sendToMonitoring({ metric: 'dom_node_count', value: nodeCount })，避免高频小数值刷屏 - 禁止在
PerformanceObserver回调中直接发网络请求，用navigator.sendBeacon()异步保底
容易被忽略的边界情况
真实业务中，以下三点常导致节点数预警失效或误报：
- Shadow DOM 内部节点默认不计入
document.querySelectorAll('*')，但$$('*')（DevTools 命令行 API）可覆盖，建议用后者做基线验证 - iframe 内 DOM 不会被主文档查询捕获，需单独注入脚本或监听
iframe.contentDocument（注意跨域限制） - 某些 UI 框架（如 Ant Design 的
Drawer、Modal）销毁时只隐藏不移除节点，display: none的元素仍参与 CSSOM 构建和继承链回溯
最危险的是把采样逻辑写在异步模块里——等 Webpack chunk 加载完再执行，navigation 和 paint 事件早已触发并丢弃，监控数据从第一帧起就是空的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
