嵌套超过6层会拖慢首屏渲染，因节点创建、样式计算和布局重排次数增加，实测低端安卓机FCP延迟20–50ms（5层以上），8层时突破300ms；CSS选择器匹配变慢且难维护；现代布局（Flex/Grid）和Fragment可有效减少层级。
嵌套超过6层会拖慢首屏渲染
浏览器解析HTML是自上而下流式构建DOM树的，每多一层
，就多一次节点创建、样式计算和布局重排。实测显示：在低端安卓机上，5层以上嵌套可使首次内容绘制（FCP）延迟20–50ms；深度达8层时，部分机型FCP突破300ms。这不是理论瓶颈，而是Chrome DevTools里能直接复现的现象。
- 用
document.querySelector('body').children[0].children.length快速判断首页是否冗余包裹——视觉上只有header/main/footer三块，却返回8+，大概率存在无意义wrapper - 打开DevTools → Elements面板，右键任意节点 → “Show DOM properties”，查
node.depth值，≥6就要重构 - 避免把
单元格当容器用：
深层嵌套让CSS选择器变慢且难维护
CSS选择器匹配是从右往左进行的。比如写
.container div p span.title，浏览器先找所有span.title，再逐层向上验证父级是否符合div、p、.container。DOM越深，每次回溯路径越长；当页面有数百个匹配节点时，样式重算（Style Recalc）耗时可能单次增加0.5ms以上——滚动或动画中这就够掉帧。- 深层无语义嵌套逼你写脆弱选择器：
div > div > div > p，HTML微调就全崩 - 用
、替代三层，能让.wrapper p变成article p，右侧更唯一，匹配更快- 检查“Coverage”面板，搜
div类选择器命中率，若大量规则未生效，说明HTML结构和CSS已脱节现代布局方案能直接砍掉冗余层级
不是删代码，是换写法。传统浮动/inline-block布局依赖父容器清除浮动、子项浮动，天然需要wrapper；而Flex/Grid把布局逻辑提到父级，子元素无需额外容器。
- 三列等宽布局，老写法：
A - 导航栏用
nav { display: flex }，按钮直接子元素，不用
- 检查“Coverage”面板，搜
- 深层无语义嵌套逼你写脆弱选择器：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
