语义化标签应优先选用<main>、<header>、<footer>等原生标签，因其被浏览器原生识别，解析路径更短；避免套层<div>导致DOM深度超4层，实测节点每增1000，V8编译多耗12ms并恶化layout shift。
语义化标签怎么选，才不拖慢解析
浏览器对 <header></header>、<main></main>、<nav></nav> 这类标签有原生识别逻辑，解析时能提前标记关键区块；而 <div class="header"> 得靠 CSS 类或 JS 判断，多一层匹配开销。这不是“语义更好看”，是解析路径更短。
<p>常见错误是把语义标签再套一层 <code><div class="container">，导致 DOM 深度超 4 层。实测：DOM 节点每增 1000，V8 编译平均多耗 12ms，且 layout shift 分数明显上升。
<ul>
<li>优先用 <code><main></main> 包主内容，它支持 document.querySelector('main') 直接定位，SSR 注水时可跳过非关键区域 hydration
<footer></footer> 和 <aside></aside> 不要包裹在 <div id="layout"> 里——它们语义独立，强行嵌套会干扰辅助技术对页面边界的判断
<li>需要 CSS Grid 布局又不想破坏结构时，用 <code>display: contents 替代无意义父容器，但注意 IE 全系不支持Flex/Grid 布局怎么写，才能避免重排放大
Flex 适合一维线性排列（比如导航栏、表单控件），Grid 适合二维布局（卡片流、仪表盘）。混用或误用会把布局成本翻倍。
典型坑是：在 display: flex 容器里再套 display: grid 微调子项位置。这往往说明模块职责没切分清，本该由父级 Grid 统一规划，却用 Flex 做第一层再用 Grid 补丁式修正。
立即学习“前端免费学习笔记（深入）”；
- 三列等宽布局，老写法要 3 层嵌套；新写法直接：
<main style="display: grid; grid-template-columns: 1fr 1fr 1fr;"><section>A</section><section>B</section><section>C</section></main> - Grid 布局必须显式定义
grid-template-rows，否则隐式轨道（auto 高度）可能触发多次重排 - Flex 容器内避免用
align-items: stretch+ 子项设固定高，容易因内容高度波动引发重排
首屏图片加 loading="lazy" 为什么反而拉垮 LCP
浏览器对首屏图片有默认高优先级调度策略，加 loading="lazy" 等于主动降级——它会推迟加载直到滚动接近，LCP（最大内容绘制）直接掉帧。
所有带 loading="lazy" 的 <img> 必须同时声明 width 和 height，否则没有尺寸占位，渲染时突然撑开会导致 CLS（累积布局偏移）。
- 首屏可见区域内的
<img>必须去掉loading属性，或显式设为loading="eager" -
<iframe>也支持loading="lazy"，但仅当其内容不在首屏关键路径上才启用 - 服务端拼 HTML 字符串时容易漏属性，建议模板引擎内置校验规则，比如检测
loading="lazy"但缺失width/height
HTML 构建后怎么验证结构是否真扁平
别信源码层级，要看构建后的真实 DOM。很多框架（如 Vue 单文件组件）默认加 wrapper，BEM 类名强绑定也常催生冗余 <div>，这些在 Elements 面板里才暴露得出来。
检查重点不是“有没有 div”，而是“有没有被样式或 JS 强依赖的无意义包裹层”。比如一个 <section> 外套了 <div class="wrapper">，而这个 wrapper 除了给 margin 或 padding 就没别的作用——这就是该砍的。
- 打开 DevTools → Elements 面板，展开看真实嵌套深度，目标控制在 3–4 层内
- React/Vue 中开启
<></>Fragment 或v-for的:key直出子元素，跳过无意义父容器 - 用
display: contents替代包裹层时，要确认它不剥离可访问性节点——某些 screen reader 会忽略display: contents父级下的语义信息
<nav></nav> 拆进 <header></header> 里，结果 <nav></nav> 失去独立语义；或者用 display: contents 省了一层 DOM，却让屏幕阅读器无法识别导航区块。这些地方没法一刀切，得结合实际使用场景权衡。
