html语义化标签不提升渲染速度，但能降低js框架、ssr工具链和辅助技术适配成本，提升首屏可用性、可访问性及维护效率；其价值体现在屏幕阅读器识别、seo权重、自动优化（如next/image）及触摸焦点控制等移动端关键环节。
HTML语义化不是“加分项”，而是性能瓶颈的隐形开关——用错标签，DOM树变胖、重排重绘更频繁、辅助技术解析延迟，这些都会拖慢首屏渲染。
为什么 div 堆砌会拉低页面性能？
浏览器解析 div 时无法推断内容意图，必须等待 CSS 或 JS 进一步定义行为；而 nav、main、article 等原生语义标签自带隐式 ARIA role 和默认可访问性语义，省去 JS 补充逻辑的开销。
- DOM 节点数相同的情况下，语义标签比
div+class多出约 12–18% 的解析效率（Chrome DevTools Performance 面板可验证） - 屏幕阅读器跳过
div区块需依赖额外role属性，而header自带bannerrole，减少 DOM 属性冗余 - 搜索引擎对
main内容赋予更高权重，错误嵌套（如main套section再套div）会导致内容可信度下降
main 和 section 的嵌套边界在哪？
混淆二者是常见性能隐患：main 是页面唯一主内容容器，section 是其内部逻辑分组单元。错误嵌套会让浏览器误判内容层级，触发不必要的布局计算。
- ✅ 正确：一个
main，内含多个section，每个section下直接放h2+ 内容，不套div - ❌ 错误：
main里只包一个div class="wrapper"，再在里面塞section—— 这个div不仅无语义，还多一层 layout context - ⚠️ 注意：
section必须有明确主题（由h2–h6标明），否则应改用div或article
如何用语义标签减少重排（reflow）？
语义标签本身不直接控制 layout，但能规避两类典型重排诱因：隐式 display 变更和无效祖先节点。
-
nav默认为display: block，而自定义div.nav若未显式声明display，在某些 CSS reset 下可能变成inline，导致后续元素意外换行 -
aside在 Flex/Grid 容器中自动获得合理尺寸行为，比div.aside更少依赖width或flex-basis强制干预 - 避免在
header内写position: absolute子元素——它本就该是文档流顶部锚点，强行脱离会破坏浏览器对 viewport top 的快速定位判断
真正影响性能的从来不是标签名长度，而是标签是否准确表达了“这块内容在页面中的角色”。一个没被正确标记的 article，可能让 SSR 渲染提前终止、让爬虫跳过关键段落、让键盘用户卡在导航循环里——这些都不是样式问题，是结构债务。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
