DOM深度超6层时getComputedStyle会卡顿80ms以上，因浏览器需逐层回溯祖先链匹配选择器、继承属性和创建布局上下文，深度每+1开销叠加，实测12层时低端安卓机单次调用常阻塞主线程80ms+。
DOM深度超6层时getComputedStyle会卡顿80ms以上
这不是“可能变慢”，是低端安卓机上可复现的硬性卡顿。浏览器计算样式要逐层回溯祖先链，深度每+1，继承属性查找、选择器匹配、布局上下文创建就多一层开销。实测深度达12时，getComputedStyle(el)单次调用在2GB RAM设备上常卡住80ms+，直接阻塞主线程。
常见错误现象包括：菜单展开延迟、滚动掉帧、offsetHeight在循环中反复调用触发强制同步布局、document.querySelectorAll('.menu-item')耗时随深度线性增长（每层+12%）。
- 别靠肉眼数缩进——粘贴这段脚本到控制台快速定位：
(function walk(node, level = 0) { if(level >= 6) console.log(`深度 ${level}:`, node); for(let child of node.children) walk(child, level + 1); })(document.body); - 右键任意节点 →
Show DOM properties→ 看node.depth值：≥7就要重构，≥10已属高危 - 语义必需的
ul→li→a三层保留，禁止再套div包裹a；图标缩进、折叠箭头统一用::after伪元素，不新增标签
innerHTML += 是深层DOM内存泄漏的隐形推手
每次执行container.innerHTML += htmlString，浏览器都会重建整个子树，但旧节点未必立即释放——它们可能被闭包、事件监听器或缓存变量隐式持有，导致parentNode链断裂后整条祖先链滞留在内存中，Chrome DevTools 的Memory > Allocation instrumentation on timeline能清晰看到Node实例持续增长却未回收。
尤其在管理后台这类高频动态插入/移除节点的场景中，这种泄漏会指数级放大GC压力。
立即学习“前端免费学习笔记（深入）”；
- 改用
container.replaceChildren(...items.map(createItemElement))：它强制同步销毁旧子节点及其样式计算上下文，切断引用路径更彻底 - IE不支持
replaceChildren()，但Chrome 86+、Firefox 76+、Safari 14.1+和鸿蒙ArkTS均已原生支持；兼容旧环境可用while (container.firstChild) container.removeChild(container.firstChild) - 避免
document.body.appendChild(fragment)直接挂载整块结构；先用document.createDocumentFragment()预构建，再单次插入，能切断中间层节点的临时引用链
首屏节点数超500、整页超2000就会触发非线性layout耗时跃升
Chrome中layout耗时会从15ms突跃至60ms+，这不是渐进变慢，而是拐点式恶化。节点数从1000到10000，layout耗时常翻倍甚至更高，尤其在SSR首屏或低端安卓机上。
问题常被掩盖：框架默认包裹、服务端模板拼接、富文本渲染（dangerouslySetInnerHTML）都可能悄悄注入几十层嵌套，document.querySelectorAll('*').length才是唯一可信指标。
- SPA首屏严格控制≤500节点；整页硬性约束≤2000；CI中必须用Puppeteer断言：
page.evaluate(() => document.querySelectorAll('*').length) > 2000即失败 - 删掉无功能的父级包裹，优先用
<section></section>、<nav></nav>等语义化标签——它们不增加node.depth，还能缩短CSS选择器路径 - 警惕
display: inline标签堆叠（如大量<span></span>），低端设备上几千个行内元素会让layout阶段直接内存溢出；统一改用<div class="tag-inline"> + <code>display: inline-block; vertical-align: topCSS选择器嵌套比DOM嵌套更隐蔽地拖慢性能
DOM扁平但CSS写着
.page .header .nav .item a，浏览器照样从每个a开始逐层往上验证.page是否存在。真正拖慢的是选择器回溯路径长度，不是DOM标签数本身。SCSS里滥用&嵌套编译后生成.theme-dark .menu .menu__item:hover，仍是4层匹配链。BEM类名（如
nav__item--active）本质是把结构关系“编译”进类名，让浏览器只查单类，跳过所有向上遍历。- 主动提级修饰符：写
.menu__item--hover，而非依赖父级.menu:hover .menu__item - 避免
div div h2这类纯class堆叠结构，深度已达7；改用.card .title或直接h2.title - 清除浮动不用
<div class="clearfix"></div>，改用::after { content: ""; display: table; clear: both; }；分隔线用border-bottom或伪元素，不额外加<hr>
grid、flex、伪元素）承担。 - 主动提级修饰符：写
