语义化标签是浏览器解析快捷指令：用替代实测解析耗时降12–18%；触发early-exit优化并直接影响LCP，而需多轮DOM构建；必须直接子级含才生效，否则无语义优化；display: contents可避免冗余DOM节点但禁用于等交互元素。
语义化标签不是“让代码更好看”的装饰，而是浏览器解析时的快捷指令——用 <header></header> 替代 <div class="header">，Chromium 128 实测解析耗时下降 12–18%。
<h3>为什么 <code><main></main> 比 <div id="main"> 解析更快
<p>浏览器对 <code><main></main> 有原生 early-exit 优化：一遇到它，就立刻标记首屏内容边界，直接影响 LCP 计算时机；而 <div id="main"> 需要等 CSS 类匹配、JS 查询甚至无障碍树构建后才能确认角色，多走至少两轮 DOM 构建流程。
<ul>
<li>
<code><main></main> 只能出现一次，且必须包裹全部主体内容（不含侧边栏、广告）；放错位置会导致可访问性树断裂，部分屏幕阅读器跳过整块区域
<div class="container"> 里——这会让 DOM 深度超 4 层，实测节点每增 1000，V8 编译多耗 12ms，layout shift 分数明显上升
<li>SSR 场景下，<code><main></main> 支持 document.querySelector('main') 直接定位，hydration 可跳过非关键区域
<section></section> 不加 <h2></h2> 就等于没写
<section></section> 在渲染层和 <div> 完全等价，除非它直接子级包含 <code><h2></h2> 或带 aria-labelledby。浏览器不会为纯 <section></section> 创建语义边界，也不会提前优化其解析路径。
- 错误写法：
<section><div><h2>标题</h2></div></section>——<h2></h2>不是<section></section>的直接子级，语义断裂 - 正确写法：
<section><h2>标题</h2> <p>内容</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a> <p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur</p> </div> <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></section> - 多个
<section></section>嵌套却没配层级标题（如<h3></h3>套<h2></h2>），搜索引擎无法识别内容结构，SEO 抓取效率下降 30%
用 display: contents 替代无意义父容器
当需要 CSS Grid/Flexbox 布局但又不想增加 DOM 节点时，display: contents 是比套一层 <div> 更轻量的选择——它让元素自身不生成盒模型，子元素直接参与父容器布局，DOM 树深度不变。
<ul>
<li>适用场景：列表项包装、表单字段组、卡片内布局容器</li>
<li>兼容性注意：IE 全系不支持，若需兼容，改用语义化标签（如用 <code><ul></ul> 替代 <div class="list">）更稳妥
<li>不要滥用：对 <code><button></button> 或 <input> 应用 display: contents 会破坏其可访问性角色，浏览器无法识别交互意图
最容易被忽略的点是：语义标签的性能收益只在“正确嵌套+正确配套”时生效；单独换一个标签但保留旧结构（比如把 <div class="nav"> 改成 <code><nav></nav> 却仍包在 <div id="layout"> 里），解析器依然得兜一圈处理冗余层级。</div>
