浏览器基于<main>优先加载布局核心内容、隔离<article>渲染上下文以降低重排开销；<nav>提升预连接精准度，<section>需配合heading才触发语义调度，<time>和<address>分别强化时间可信度与站点权威性。
语义结构不是“写得好看”的装饰，而是浏览器解析、渲染和资源调度的直接输入信号——结构一变，性能表现就跟着变。
浏览器如何基于 main 和 article 优化首屏渲染
现代浏览器（Chrome 115+、Firefox 120+）在构建 DOM 树时，会优先识别 main 内容区域，并提前触发其内部资源的加载与布局计算。如果把核心内容塞进 <div class="content">，浏览器只能靠 CSS 类名猜测，延迟关键渲染路径。
-
main必须且仅出现一次，且不能嵌套在header、footer或aside内部；否则部分浏览器会忽略其语义权重 -
article触发独立的渲染上下文：每个article的样式计算、重排开销被隔离，适合长列表或卡片流场景 - 实测数据：将首页主内容从
<div id="main-content">改为<main>后，LCP（最大内容绘制）平均快 120–180ms
nav 和 section 对预加载与懒加载的影响
nav 标签本身不触发预加载，但它向浏览器明确传递“这是导航链接集合”，使预连接（preconnect）和 DNS 预取策略更精准；而 section 若搭配 heading（如 <h2>），会被 Chromium 系列视为可折叠/可跳转区块，影响无障碍导航树和滚动锚点行为。
- 只在真正用于页面级或区块级导航时用
nav：面包屑、页内锚点、社交图标链接都不算导航，应改用ul或div -
section必须有显式主题，即紧邻的 heading 元素（h2–h6），否则会被解析为普通容器，失去语义调度能力 - 错误示例：
<section><p>一段说明文字</p></section>—— 浏览器无法判断该区块意图，不参与任何性能优化
为什么 time 和 address 会影响 SEO 渲染优先级
搜索引擎爬虫和现代浏览器都依赖微观语义标签提取结构化信息。time 的 datetime 属性提供机器可解析的时间戳，直接影响内容新鲜度评分；address 则帮助识别页面归属主体，强化站点权威性信号。
立即学习“前端免费学习笔记（深入）”；
-
<time datetime="2026-06-24">今天</time>比纯文本 “今天” 更易被索引为发布时间 -
address应出现在footer或aside内，不可用于“联系客服”按钮的包装容器（那是交互元素，不是联系信息主体） - 滥用
time（如给每段正文加一个无意义时间）反而稀释关键时间信号，降低可信度
真正难的不是记住哪些标签能用，而是每次写 <div> 前停半秒：这个区块有没有独立语义？是否承担导航、主内容、补充信息或时间锚点中的某一种角色？一旦习惯性跳过这半秒，结构就退化成视觉容器，性能与 SEO 优势也就同步归零。
