dom节点总数超2000会卡顿，实测chrome中layout耗时从15ms跃升至60ms+；深度超6层更危险，getcomputedstyle()耗时随深度增加而激增，需用脚本定位并重构深层节点。
DOM节点总数超2000会卡顿，这不是建议，是实测拐点
Chrome DevTools 里 layout 阶段耗时会从 15ms 突跃到 60ms+，尤其在低端安卓机或 SSR 首屏场景下。这不是“可能变慢”，而是可复现的非线性增长——节点数从 1000 到 10000，layout 耗时常翻倍甚至更高。
实操建议：
- 用
document.querySelectorAll('*').length快速统计，别信源码“看着不多”；构建后 HTML 常因框架默认包裹、服务端模板拼接膨胀 - SPA 首屏严格控制 ≤ 500；整页硬性约束 ≤ 2000，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></p></div>
DOM深度超6层比节点多更危险，浏览器递归开销是硬限制
深度影响的是“递归路径长度”，不是节点总数。100 个同级 div 远比 10 个嵌套 5 层的结构轻量。深度每 +1，getComputedStyle() 耗时平均 +12%，深度达 12 时，低端安卓单次调用可卡顿 80ms 以上。
实操建议：
- 用 Chrome DevTools → Elements 面板右键任意节点 → “Show DOM properties”，看
node.depth值；≥6 就该重构 - 别靠肉眼数缩进，粘贴这段脚本到控制台快速定位深层节点：
(function walk(node, level = 0) { if(level >= 6) console.log(`深度 ${level}:`, node); for(let child of node.children) walk(child, level + 1); })(document.body); - 删掉无功能的父级包裹，优先用语义化标签（
<section></section>、<article></article>、<nav></nav>），它们不增加渲染开销，还能缩短选择器路径 - 避免
body > div > div > div > .content > .list > .item这类纯 class 堆叠结构，深度已达 7；CSS 用.card .title而非div div div h2
深层DOM让JS-DOM交互变慢，不是代码问题，是引擎通信瓶颈
JavaScript 引擎和渲染引擎分离，每次访问 element.offsetWidth 或调用 document.getElementById() 都要跨引擎通信并触发同步布局计算。树越深，路径上中间节点越多，桥接延迟越不可控。
实操建议：
- 避免在循环中反复读写布局信息：
clientWidth、getBoundingClientRect()、offsetTop—— 它们会强制刷新样式树 - 对可能频繁展开/收起的模块，用
display: none隐藏整块，而非仅隐藏最外层容器；visibility: hidden在深层 DOM 下仍保留布局计算 - 动态插入内容时，用
DocumentFragment或一次性写入innerHTML，别在循环里反复操作深层节点 - 表格行内嵌编辑区域、折叠面板展开时批量渲染子项——这些操作若发生在深度 ≥6 的 DOM 里，极易引发肉眼可见卡顿
CSS选择器匹配效率被DOM深度严重拖累，关键在右侧唯一性
浏览器匹配选择器是从右往左执行的。比如 .list-item > .content span.title，它先找所有 span.title，再向上逐层验证父级是否符合 .content 和 .list-item > .content。DOM 越深，每次向上回溯的祖先链就越长。
实操建议：
- 把选择器右边写得越唯一越好：
.user-name比div p span快得多，后者要遍历全部span再逐层验证祖先 - scroll 回调里反复执行
querySelectorAll('.active')，每次都会从根开始查——而其实那个.active节点很可能没变，应缓存引用 - 删掉仅用于清除浮动的
<div style="clear:both"></div>，改用overflow: hidden或::after { content:""; display:table; clear:both; } - 服务端渲染时避免生成带空属性的节点，如
<div data-v-xxx=""></div>，这些仍计入 DOM 树并参与样式计算
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
