DOM节点总数超2000或深度超6层会引发非线性layout卡顿，实测于Chrome DevTools及低端安卓机、SSR首屏场景；SPA首屏建议≤500，整页硬性约束2000以内。

DOM节点总数超过2000或深度超过6层，就该立刻检查——这不是建议，是Chrome DevTools里可复现的卡顿拐点，尤其在低端安卓机或SSR首屏场景下，layout耗时会非线性翻倍。

document.querySelectorAll('*').length 超过2000怎么办

这个数字不是凭空来的：实测中，节点数从1000升到10000，布局耗时可能翻倍，且不是线性增长。SPA首屏建议≤500，整页硬性约束在2000以内比较稳妥。

• 用 document.querySelectorAll('*').length 快速统计，别信源码“看着不多”，构建后HTML常因框架默认包裹、服务端模板拼接膨胀
• CI中加Puppeteer断言，比如 page.evaluate(() => document.querySelectorAll('*').length) > 2000 就失败
• Vuex/Redux状态驱动的列表，别用 v-for 套 <div><div><div>...</div></div></div>，改用 <template></template> 或直接扁平化渲染
• 警惕 dangerouslySetInnerHTML 或 v-html 渲染的富文本，它可能带入几十层嵌套的 <div><p><span>...</span></p></div>

node.depth 超过6怎么定位和清理

Chrome DevTools → Elements面板右键任意节点 → “Show DOM properties”，看 node.depth 值。超过6就要拆——不是删节点，而是砍掉无功能的父级包裹。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• 搜索 <div></div> 或 class=""，配合Coverage面板确认哪些CSS规则根本没命中
• 删除仅用于清除浮动的 <div style="clear:both"></div>，改用 overflow: hidden 或伪元素
• BEM类名如 .header__wrapper__inner__content 往往对应4层
  ，优先用语义化标签（header、section）替代
• React/Vue组件输出时禁用无意义的根
  ，Vue SFC启用 <template></template> 作为根，React用 Fragment（）

  getComputedStyle() 和 offsetHeight 卡顿的真正原因

  深度达12时，低端机单次 getComputedStyle() 计算可卡顿80ms以上。这不是JS写得慢，是浏览器必须递归遍历全部祖先节点匹配CSS选择器。

  • 避免在scroll或动画回调里反复读取 offsetHeight、getBoundingClientRect() ——它们会强制同步布局
  • 选择器尽量靠右唯一：.user-card .name 比 div div div h2 快得多，后者依赖结构深度
  • 深层DOM下，visibility: hidden 仍触发布局计算，真要隐藏整块，用 display: none
  • 动态插入内容（如折叠面板展开）时，用 DocumentFragment 批量写入，别在循环里反复操作深层节点

  真正难的不是找到那几个超标的 node.depth 或 querySelectorAll 数值，而是每次加新组件时，都问一句：“这个 wrapper 真的必要吗？”——容忍一次，后面就容易批量复制。