CI中必须用Puppeteer自动化拦截超限DOM节点，将阈值硬编码进流程：加载页面后执行document.querySelectorAll('div,span,section,template,article').length，首屏≤500、整页≤2000，超标则构建失败并报具体路径与数值。
CI中如何用Puppeteer自动拦截超限DOM节点
上线前就卡住问题，比上线后靠DevTools人肉排查高效得多。关键不是“测一次”，而是把阈值写死进CI流程，让构建失败成为强制约束。
- 在CI脚本里启动Puppeteer加载页面后，直接执行
document.querySelectorAll('*').length，对SPA首屏建议设硬性上限500，整页不超过2000 - 别只统计
div——真正膨胀主力常是span、section、template，应统一纳入检测：document.querySelectorAll('div, span, section, template, article').length - 若用Vue/React，额外检查编译后是否无意义地多出
div[data-v-xxx]或div[role="presentation"]，这类节点往往来自空<template>或未删的调试wrapper - 报错信息必须带具体路径和数值，例如：
DOM node count 2341 > threshold 2000 in /dashboard/index.html，否则开发者无法定位
Elements面板里一眼识别非法嵌套导致的结构撕裂
浏览器不会按你写的HTML建树，而是按HTML5规范强行修正。那些“看起来不对劲”的节点，大概率是被踢出来的孤儿。
- 灰色、半透明、缩进突兀的节点——尤其出现在
p、li、td之后的独立div，基本就是p里写了div被拆出来的 - 右键某节点 →
Edit as HTML→ 敲个空格回车：如果整个子树位置跳变，说明原始嵌套不合法，浏览器刚给你重排了一次 - 禁用所有CSS后布局塌陷？常见于
table里漏了tr，或ul里直接塞div，父容器被提前闭合，后续内容全掉到body下 - 用W3C Validator验证时，优先修复第一条
Error，比如Element div not allowed as child of element p，后面Warning往往是连锁反应
第三方插件注入后DOM节点持续增长怎么确认
不是插件本身写得差，而是它没提供销毁路径。节点数每次操作后稳定+几百，基本就是它没清干净。
- 打开Console，记下
$$('*').length基线（比如4821） - 触发插件加载（如点「打开图表」），等1秒再查——若变成
6247，重复三次增量都≈+1400，锁定嫌疑 - Elements面板Ctrl+F搜插件特征字符串：
chart-container、map-canvas、widget-、data-v-，搜出大量同前缀但父容器已display: none的节点，就是残留DOM - Performance面板录制完整生命周期：加载→交互→卸载→等待2秒，看Nodes柱状图是否回落到基线±50以内；差值>200，说明没真正释放
深层DOM节点引发的内存驻留为什么难发现
节点被remove()了，但JS变量还拿着它，整个祖先链就卡在内存里不动——这种泄漏在低端设备上直接导致OOM，却不会报错。
立即学习“前端免费学习笔记（深入）”；
-
console.log(cachedNode.parentNode)返回null？不一定安全。如果cachedNode是深层节点（比如div > div > div > span），它的parentNode可能已被移除，但cachedNode本身仍被闭包强引用 - Memory面板拍快照对比：卸载前Snapshot #1，卸载后+2秒Snapshot #2，筛选
Detached HTMLDivElement，Retaining path末尾若指向插件私有函数或全局缓存变量（如window.__chartCache），就是根源 - 高频操作中避免用
getElementsByClassName——它返回实时集合，每次读.length都触发重计算；改用querySelectorAll并缓存结果，或直接querySelector('#id') - 深层嵌套（>4层）会让CSS选择器匹配成本指数上升，
.a .b .c .d p这种写法实际开销远超扁平结构，不是语法问题，是浏览器实现机制决定的
div wrapper真有必要吗？”——容忍一个，后面就批量复制。 
