DOM节点超2000或深度超6层会引发非线性layout卡顿，实测Chrome中layout耗时从15ms跃升至60ms+；需用document.querySelectorAll('*').length统计总数、node.depth查深度，超阈值须用CSS替代冗余DOM包裹并结合DocumentFragment批量操作与IntersectionObserver优化。
HTML 本身不执行逻辑，但写法一错，整个页面就卡在解析阶段——所谓“质量诊断”，不是看有没有语法错误，而是揪出那些让浏览器多干活、反复重排、甚至卡死的隐性损耗点。
document.querySelectorAll('*').length 超过 2000 怎么办
这不是警告，是 Chrome DevTools 里可复现的 layout 卡顿拐点。节点数从 1000 到 10000，布局耗时可能非线性翻倍，尤其在低端安卓机或 SSR 首屏场景下。
- 用
document.querySelectorAll('*').length快速统计，别信源码“看着不多”——框架默认包裹、服务端模板拼接会让 DOM 实际膨胀数倍 - SPA 首屏建议 ≤ 500；整页硬性约束 ≤ 2000，超了就得砍结构，不是加优化
- 警惕
v-html或dangerouslySetInnerHTML渲染的富文本，它可能带入几十层嵌套的<div> <p></p> <div class="aritcle_card flexRow">...</div> </div> - CI 中加 Puppeteer 断言：
page.evaluate(() => document.querySelectorAll('*').length) > 2000就失败
DOM 深度超 6 层引发强制同步布局
深度不是指视觉层级，而是 HTML 标签嵌套层数。每深一层，CSS 选择器匹配路径就拉长一截，getBoundingClientRect() 这类读取操作更容易触发 forced reflow。
立即学习“前端免费学习笔记（深入）”；
- 用
Chrome DevTools → Layers面板观察渲染树是否被切得太碎；过度使用transform: translateZ(0)反而加重 GPU 负担 - 把三层
<div class="wrapper"><div class="inner"><div class="content"></div></div></div>替换为语义化标签：<main><section><article></article></section></main>，既压平结构又提升可访问性 - Flexbox/Grid 能实现的布局，别靠 div 堆叠；
<header></header>内含<main></main>是语义冲突，DevTools 会 warn
Tokenization 卡在字节流接收阶段
不是 JS 执行慢，是 HTML 解析器等不到下一个字节——document.readyState 停在 "loading"，DOM 树连第一个节点都没建出来。
- 用
Network → Response → View Source确认首屏 HTML 是否被 CDN 或代理截断（比如只返回前 2KB 就断连） - 监控
performance.getEntriesByType("navigation")[0].responseEnd - performance.getEntriesByType("navigation")[0].fetchStart，若 > 500ms 且domInteractive延迟同步放大，大概率是 Tokenizer 在等字节流 - 禁用 HTML 压缩工具的
removeOptionalTags: true选项——删掉或起始标签会让 Tokenizer 降级为容错模式，更慢 -
<script type="application/json"></script>块里 JSON 字符串若含未转义"或，Tokenizer 会误判闭合点，反复回溯
滚动/输入卡顿根本不是硬件问题
60fps 是底线，某帧超 16ms 就感知卡顿。根源几乎都在主线程上做了不该做的事：读写混杂、高频样式改写、没节流的事件监听。
- 避免 “读-写-读” 陷阱：
offsetHeight后紧跟el.style.left = '10px'，再读scrollLeft—— 这会强制同步布局 - 滚动/鼠标移动事件里禁用直接 DOM 写入；改用
requestAnimationFrame节流，或直接上IntersectionObserver - 动画类名切换比
el.style.transform更稳；will-change: transform提前提示浏览器，但别滥用——每个元素都加会反向拖慢 - 本地双击打开
file://协议 HTML 特别慢？先关掉 VS Code 的 Auto Rename Tag、Prettier、ESLint，它们在保存瞬间可能触发全量解析
真正难的不是发现这些点，而是判断哪个该砍、哪个该压、哪个必须绕开——比如 <p></p> 里直接塞 <div> 是非法嵌套，但浏览器会容错修复；而深度超 6 层 + 节点超 2000，它不会帮你优化，只会卡住。</div>
