不影响解析性能，但必须唯一且为 或 的直接子元素，否则语义被静默忽略，导致屏幕阅读器“跳转到主内容”失效、seo 权重丢失；浏览器仅为其打 role="main" 标记，不阻塞渲染。
<main></main> 不影响页面解析性能，但错误嵌套会破坏可访问性与 SEO 权重分配——浏览器解析速度本身几乎不受语义标签类型影响，真正拖慢的是 DOM 树结构混乱导致的辅助技术重试、爬虫降权或渲染树重建。
浏览器解析 <main></main> 时到底做了什么
HTML 解析器遇到 <main></main> 不会触发额外计算或阻塞；它只是在构建 DOM 节点时打上一个内部标记：role="main" 和 landmark:true。这个标记不改变渲染流程，但会被屏幕阅读器和搜索引擎提取为“主内容锚点”。
关键点在于：解析器只检查两件事——<main></main> 是否唯一、是否直接子元素（即父节点必须是 或 <article></article>）。一旦违反，浏览器不会报错，但会静默忽略该语义，后续所有依赖它的行为（如 NVDA 的“跳转到主内容”）都会失效。
- ✅ 正确：
<main>...</main> - ❌ 错误：
<section><main>...</main></section>（<main></main>被当作普通块级元素处理） - ⚠️ 隐患：
<main>...</main><main>...</main>（第二个<main></main>语义被丢弃）
<section></section> 和 <article></article> 对文档大纲的影响远大于性能开销
这两个标签不增加解析时间，但会主动参与 HTML5 文档大纲算法（Document Outline Algorithm）。每次出现 <section></section> 或 <article></article>，浏览器就新建一个“节上下文”，并尝试从其内部第一个标题（<h1></h1>–<h6></h6>）推导层级。如果标题缺失或跳级（比如 <section><h3>...</h3></section>），大纲就会断裂——这不会让页面变慢，但会让屏幕阅读器用户无法用“标题导航”快速定位，也导致 Google 结构化数据提取失败。
实操建议：
- 每个
<section></section>或<article></article>必须包含至少一个标题，且应以逻辑上合理的层级起始（如页面已用<h1></h1>，则子<section></section>用<h2></h2>） -
<article></article>内部标题可重新从<h1></h1>开始（因其代表独立可分发单元） - 避免用
<section></section>包裹单个段落或按钮——它不是样式容器，而是语义分组单元
为什么 <div> 在解析层面“最轻”，却最容易引发可访问性故障
<p><code><div> 确实没有语义开销：不参与大纲、不生成 landmark、不映射 ARIA role。但它像一张白纸——你不用它，辅助技术就只能靠猜测；你乱用它，等于主动抹掉所有结构线索。
<p>典型问题场景：</p>
<ul><li>用 <code><div class="nav"> 替代 <code><nav></nav>：NVDA 不识别，用户无法快捷跳转
<div aria-label="main content"> 模拟 <code><main></main>：aria-label 是文本替代，不提供 landmark 导航能力
<div> + CSS Grid/Flex：DOM 层级膨胀，虽不影响解析速度，但显著增加屏幕阅读器遍历成本（尤其在移动端）
<p>真正要警惕的不是标签本身耗资源，而是用 <code><div> 掩盖了本该暴露的语义结构——这会让可访问性和 SEO 退回到 2005 年。
<h3>动态渲染中语义标签的“时机陷阱”</h3>
<p>React/Vue 项目里，<code><main></main> 或 <article></article> 常由条件渲染控制（如 {isLoading ? null : <main>...</main>}）。问题在于：DOM 插入时机若晚于初始解析完成，部分辅助技术（尤其是旧版 JAWS）可能错过 landmark 注册。
解决方案很具体：
- 确保语义容器在首次 render 时就存在（哪怕内容为空），而非后期 patch 进去
- 避免在
useEffect或mounted中才创建<main></main>—— 它得是 SSR/首屏 HTML 的一部分 - 用
<main hidden></main>占位比完全不渲染更安全，再通过 JS 移除hidden
最常被忽略的一点：语义不是“加上去”的装饰，而是页面骨架的第一层定义。一旦 DOM 初始结构没立住，后面所有补救（ARIA、JS 注入）都只是打补丁。
