DOM树深度超6层使样式计算耗时翻倍，首屏延迟增加20–50毫秒。重构应检查真实层级，避免无意义嵌套；合理使用语义化标签，注意``唯一性、``语义正确；Flex用于一维排列，Grid需显式定义行，三列等宽可用`display:grid`一步实现。
谈到HTML布局性能优化，许多人容易忽略一个关键点：真正影响页面流畅度的，往往不是JavaScript逻辑或CSS选择器的编写水平，而是DOM树的内部结构——当嵌套层级超出一定深度后，即使只是一个简单的`
`，浏览器也可能在后台悄然降低帧率。
DOM树深度超过6层，样式计算速度显著下降
当浏览器计算某个元素的最终样式时，必须沿DOM树向上遍历所有祖先节点以完成选择器匹配。深度每增加一层，`getComputedStyle()`的执行时间就会线性增长。实测结果显示：深度从4层提升到8层，计算耗时直接翻倍；达到12层时，部分低端安卓设备单次计算的卡顿时长甚至超过80毫秒。
那么，如何排查和优化？
- 打开Chrome DevTools → Elements面板，右键点击任意节点选择“Show DOM properties”，查看`node.depth`的值。如果该值大于或等于6，就需要认真考虑重构DOM嵌套结构。
- 尽量避免使用`body > div > div > div > .item`这类依赖强制路径的选择器。改用`.item .title`等直接通过类名定位的方式，效率会显著提升。
- 使用`querySelectorAll('.item')`查询100个节点时，DOM深度每增加一层，总耗时大约上升12%。
- 另一个常见陷阱：在深层DOM中，如果修改某个`.list`的高度，实际触发的重排范围是整个子树，而不仅仅局限于该元素本身。
嵌套过深直接增加首屏延迟20-50毫秒
浏览器的HTML解析是同步构建DOM树的过程。每增加一层`
`，就意味着多一次节点创建、样式计算和布局重排。对于低端设备来说，当嵌套层级超过5层时，首屏延迟可能达到20-50毫秒。
一些实用的检查方法和优化思路：
- 检查的重点是构建后的HTML，而非源码。使用Elements面板查看真实DOM层级——许多Vue或React组件会默认包裹一层无意义的`
`，这些在模板中不可见，但实际渲染时却实实在在地增加了DOM树深度。
- 能用``、`
