扁平结构能减少重绘连带重排，因其降低DOM嵌套深度与节点数量，避免浏览器频繁flush渲染队列；每少一层div就少一次父容器几何回溯，显式尺寸+语义标签替代冗余容器可消除隐式尺寸推导。
为什么扁平结构能减少重绘连带重排
重绘（repaint）本身不改布局，但浏览器一旦发现 DOM 节点过多、嵌套过深，就会在样式计算和事件冒泡阶段反复 flush 渲染队列——尤其是当某个 offsetWidth 或 getBoundingClientRect() 被调用时，会强制触发同步重排，连带引发整片区域重绘。DOM 节点每多 300 个，实测高频点击延迟上升 8–12ms；超 1500 个节点后，低端机上可感知卡顿。
扁平结构不是为了“看着清爽”，而是让浏览器跳过大量隐式尺寸推导：少一层 div，就少一次父容器几何信息回溯；少一个未定宽的 inline-block 容器，就避免整行基线重算。
用语义标签替代 div 堆叠时的关键约束
错用 section 或 article 反而增加解析负担，因为它们触发隐式 ARIA 角色和额外 DOM 层级。必须按规范使用：
-
main必须且只能出现一次，不能嵌套在section或article内；它是页面唯一核心内容容器 -
nav应直接包裹导航链接，不要套div class="nav-wrapper"——后者会让 JS 事件委托挂载点不可靠 -
aside不等于“右边栏”，而是与当前内容相关但可剥离的补充信息；纯广告位请用div role="complementary" - 删掉所有仅用于加
margin或padding的空div，用 CSS 直接作用于语义标签（如main { padding: 1rem; }）
Flex/Grid 布局下如何真正压平 DOM 层级
换 display: flex 不等于自动扁平。常见陷阱是保留旧结构再加 display 属性，比如：
<div class="row"> <div class="col"><div class="card">...</div></div> </div>
这仍是三层嵌套。正确做法是砍掉冗余容器，让语义标签承担布局职责：
<section class="cards-grid"><article>...</article><article>...</article></section>
同时注意：
- 所有
flex或grid容器应显式设width和height（哪怕100%），否则父级尺寸未定死时，子项读取offsetWidth仍会强制重排 - 避免在 flex 子项上同时写
width: 100%和flex: 1，两者冲突，浏览器可能多算一轮主轴分配 -
grid-template-columns: 1fr 2fr套在另一个fr容器里，尺寸推导路径变长，resize 或 DOM 插入时重排成本上升
首屏 HTML 位置比结构扁平更关键
结构再扁平，如果关键内容被埋在底部，浏览器仍要解析完所有前置节点才能构建渲染树。首屏性能瓶颈常出在这里：
- 把
header、h1、首张img loading="eager"放到body最顶部，别被侧边栏、广告脚本或埋点代码挡住 - 删掉
div类型的“幽灵节点”：用开发者工具 Elements 面板 Ctrl+F 搜或仅含空格的div，这类节点几乎全是冗余 - 服务端返回的 HTML 片段，先塞进临时
template元素再取.content，比直接innerHTML = str更安全——避免标签未闭合导致的隐式重排
真正容易被忽略的是：结构扁平和首屏靠前必须同步做。只扁平不靠前，浏览器照样等；只靠前不扁平，解析快但渲染树构建慢。两者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
