DOM节点数异常需主动采样，因resource计时不感知DOM结构变化；可靠时机包括DOMContentLoaded后、navigation+paint回调中、SPA路由变更后100ms；应避免全量查询拖慢主线程，改用childNodes递归并加阈值过滤。
资源计时本身无法直接预警 DOM 节点数异常，必须结合 document.querySelectorAll('*').length 主动采样，并在 PerformanceObserver 触发 navigation 或 load 时机做快照——否则节点数统计会漏掉动态渲染内容或误判为“加载完成”。
为什么 performance.getEntriesByType('resource') 不能反映 DOM 节点膨胀
performance.getEntriesByType('resource') 只返回已加载的外部资源（如 JS、CSS、图片）的耗时记录，它不感知 DOM 树结构变化。哪怕页面插入了 5000 个 div，只要没发起新请求，该 API 返回数组长度就仍是 0。
- DOM 节点增长是 JS 执行结果，不是资源加载事件，
resource类型 observer 完全监听不到 - 用
performance.getEntriesByType('navigation')可拿到domComplete时间点，但它只表示解析+资源加载完成，不保证所有框架组件已挂载（比如 React 的useEffect还没跑） - 若仅靠
load事件后查节点数，会漏掉 SPA 路由跳转后新增的节点（load不重发）
在哪几个时机采样 DOM 节点数才可靠
必须覆盖静态解析、JS 渲染、路由更新三个阶段，单一时机必然失真：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
DOMContentLoaded后立即执行：捕获 HTML 初始结构，但不含 JS 动态插入内容 -
PerformanceObserver监听navigation+paint类型，在回调里检查document.readyState === 'complete'且document.body存在时采样——此时首屏关键节点基本就位 - 对 SPA 应用，额外监听
popstate或框架路由事件（如history.listen），在每次路由变更后 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('*')，需单独遍历shadowRoot.querySelectorAll('*')（但注意跨域 shadowRoot 不可访问） - SSR 页面首次加载时，服务端已输出大量节点，但客户端 hydration 前
document.body可能被清空重写，此时采样值会先高后低 - 第三方 SDK（如客服浮窗、埋点脚本）可能在
load后异步注入数百个节点，这类延迟注入必须靠 MutationObserver 补监听，不能只依赖初始快照
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
