嵌套过深的<div>会拖慢渲染速度，每多一层都增加节点创建、样式计算和布局重排开销，5层以上可能导致首屏延迟20–50ms，尤其在低端设备上；应优先使用语义化标签、flex/grid布局、fragment或slot等方案减少冗余嵌套。
嵌套过深的 <div> 会拖慢渲染速度
浏览器解析 HTML 是自上而下构建 DOM 树的，每多一层 <div> 嵌套，就多一次节点创建、样式计算和布局重排开销。尤其在移动端或低端设备上，5 层以上嵌套（比如 <div><div><div><div><div>）可能让首屏渲染延迟 20–50ms。
实际项目中常见于「为了兼容老 CSS 框架」或「盲目套用组件化结构」导致的冗余包裹。例如一个按钮被包在 4 层 <div> 里，只为了满足某个 BEM 类名层级：
<div class="card">
<div class="card__body">
<div class="content">
<div class="content__inner">
<button>提交</button>
</div>
</div>
</div>
</div>
- 能用语义化标签替代就别用
<div>：比如<article>、<section>、<nav>本身具备结构意义，且现代浏览器对其优化更好 - 检查构建产物：Vue/React 组件默认可能注入多余根节点，开启
fragment或使用v-for的:key直接渲染子元素可跳过一层 - CSS 中慎用
display: contents——它能让父容器不参与盒模型，但不支持 IE，且会剥离可访问性树中的节点
flex 和 grid 能减少嵌套就别硬撑 float 或 inline-block
传统浮动布局常靠「父容器清除浮动 + 子项浮动」实现两栏，结果是必须加一层 wrapper；而 display: flex 或 display: grid 可直接在父级定义布局关系，子元素无需额外容器。
比如三列等宽布局，老写法要三层：
立即学习“前端免费学习笔记（深入）”；
<div class="row"> <div class="col">A</div> <div class="col">B</div> <div class="col">C</div> </div>
用 grid 可直接让 <main> 自己划分区域：
<main style="display: grid; grid-template-columns: 1fr 1fr 1fr;"> <section>A</section> <section>B</section> <section>C</section> </main>
-
flex适合一维线性排列（如导航栏、表单控件），grid更适合二维网格（如卡片列表、仪表盘） - 避免在
grid容器里再套flex做微调——这往往意味着设计没想清，该拆分的是逻辑模块而非强行嵌套 - 注意
grid的隐式轨道生成：未显式定义grid-template-rows时，每行都是auto，可能引发意外高度计算
用 <template> 和 slot 替代运行时拼接嵌套
服务端渲染或 JS 动态插入 HTML 时，容易写出深层字符串拼接，比如：
html += '<div class="list"><div class="item"><span>' + data.name + '</span></div></div>'
这种写法不仅难维护，还绕过了浏览器对原生元素的解析优化路径。现代方案应优先用声明式方式控制嵌套深度。
- Web Components 中用
<template>预编译结构，避免重复解析；Vue/React 则用<slot>或{children}让父组件决定是否包裹，而不是子组件强制提供外壳 - 如果必须动态生成嵌套结构，优先用
document.createElement()+append()，而非innerHTML——后者会触发完整子树重解析 - 警惕「高阶组件」滥用：React 中一个
withLoading+withError+withAuth套三层，实际 DOM 就多出三层<div>，改用 hooks 或 compound components 更轻量
Chrome DevTools 里怎么看嵌套是否过载
光看代码数不出问题，得用工具验证。打开 Chrome DevTools → Rendering 面板 → 勾选 Paint flashing 和 Layout Shift Regions，再滚动页面：频繁闪红或大片错位，大概率是嵌套导致 layout 不稳定。
更直接的方法是看 DOM 树深度：
$$('*').reduce((max, el) => Math.max(max, el.closest('*') ? el.compareDocumentPosition(document.body) : 0), 0)
不过更实用的是在 Elements 面板中右键节点 → Break on > subtree modifications，然后操作交互，看哪些嵌套节点被反复增删——那些就是该扁平化或缓存的热点。
- Performance 面板录制后，关注
Layout和Recalculate Style两项耗时占比，超过 20% 就要查嵌套是否引入了不必要的样式依赖链 - 不要迷信“语义化必须嵌套”：比如
<figure><figcaption>是合理嵌套，但<div><div><div><p>就只是懒
