构建高性能界面：HTML语义化与样式渲染协同-html教程-PHP中文网

语义化html是css、js、浏览器调度和seo协同优化的前提；main元素具备原生识别能力，支持快速定位、首屏优化与seo，而div.main需额外匹配，延迟至少一个渲染周期。

构建高性能界面：html语义化与样式渲染协同

语义化 HTML 本身不提速，但它是让 CSS、JS、浏览器调度和 SEO 真正协同的前提——没这层结构，所有优化都像在迷雾里调参数。

为什么 `<main></main>` 比 `div.main` 更容易做首屏优化

浏览器对 <main></main> 有原生识别能力：解析阶段就能标记“这是主内容区”，配合 fetchpriority="high" 或服务端 SSR hydration 跳过非关键区域，能减少主线程阻塞。而 div.main 需要 JS 或 CSS 类名匹配，晚至少一个渲染周期。

<main></main> 是唯一支持 document.querySelector('main') 原生快速定位的语义节点，CSS 关键样式内联时必须与它对齐，否则内联失效
搜索引擎和 Lighthouse 把 <nav></nav>、<aside></aside> 视为低优先级，会延迟渲染或跳过快照生成，降低首屏 LCP 压力
用 <picture></picture> + <source media></source> 包裹在 <section></section> 内时，媒体查询在 HTML 解析阶段就生效，避免等 CSSOM 构建完才加载图片

`display: contents` 什么时候该用、什么时候不该用

它让父元素不参与盒模型，但子元素语义保留——适合需要 Grid/Flex 布局又不想破坏语义层级的场景，比如把 <header></header> 当作纯语义容器，实际布局由子元素撑开。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

适用：用 <article></article> 包裹标题+正文+时间，但想让标题和正文并排布局，可给 article 设 display: contents，再用 article > * 做 Grid
慎用：如果子元素依赖父元素的 stacking context（如 z-index、opacity），display: contents 会抹掉该上下文，导致遮挡异常
不能用于替换可访问性角色：比如把 <nav></nav> 改成 display: contents 后，屏幕阅读器可能丢失导航意图信号

嵌套超过 4 层就该警惕性能拐点

DOM 节点数每增加 1000，V8 编译耗时平均上升 12ms；深度超 6 层时 layout shift 分数明显恶化。语义标签不是越多越好，而是越准越轻。

推荐结构：<main></main> → <section></section> → <article></article> 或 <aside></aside>，中间不插 div.wrapper 类包裹层
<footer></footer> 和 <header></header> 应直接挂载在 body 下，不要套在 div#layout 里——这会干扰辅助技术对“页面边界”的判断
用 section 必须带 h2–h6 标题，否则不如用 div；无主题的 section 只是多一层 DOM 开销