html性能瓶颈常源于dom结构混乱、嵌套过深及语义错位，优化需重构骨架而非仅压缩代码；语义化标签选用须严格匹配内容逻辑，如必须含标题且代表可独立分发单元，仅用于与当前内容相关可剥离的补充信息，全页唯一且不可嵌套于或内，无合适语义时仍合法，强行套用反损可访问性。
HTML 性能瓶颈往往不在 JS 或 CSS，而在 DOM 本身——结构混乱、嵌套过深、语义错位，直接拖慢解析、渲染和辅助技术读取。优化不是“压缩几行空格”，而是重构骨架。
语义化标签怎么选，不等于换掉所有 <div>
<p>把 <code><div class="header"> 换成 <code><header></header> 是起点，但不是终点。关键在语义是否匹配内容逻辑：
-
<section></section> 必须带标题（<h1></h1>–<h6></h6>），否则浏览器视为无效语义；它代表可独立分发的内容单元（如一篇博客正文），不是视觉上的“一块区域”
-
<aside></aside> 不是侧边栏容器，而是与当前内容相关但可剥离的补充信息（如术语解释、引用来源）；纯广告位请用 <div role="complementary">
<li>
<code><main></main> 全局只能出现一次，且不能嵌套在 <article></article> 或 <section></section> 内；它包裹的是页面核心内容，不是“除了 header 和 footer 之外的所有东西”
- 没合适语义标签时，
<div> 依然合法——强行套 <code><section></section> 反而破坏可访问性
DOM 嵌套超过 4 层，渲染就开始掉帧
浏览器构建 DOM 树是深度优先遍历，每多一层嵌套，解析耗时、CSS 选择器匹配成本、重排开销都非线性上升。实测中，5 层以上嵌套在低端设备上首屏延迟可达 50ms：
- 用开发者工具 Elements 面板按
Ctrl+Shift+C 定位深层节点，重点查 <div> 套 <code><div> 的区域
<li>Flex/Grid 能直接替代 2–3 层包裹：比如三栏布局，老写法要 <code><div class="row"> + 三个 <code><div class="col">；新写法让 <code><main></main> 自己设 display: grid，子元素直接是语义化区块
- React/Vue 组件默认可能注入多余根节点，开启
Fragment 或使用 v-for 的 :key 直接渲染子元素，跳过一层
-
display: contents 能让父容器不参与盒模型，但会剥离可访问性树节点，慎用
资源加载顺序错了，代码再干净也白搭
一个没加 defer 的 <script src="app.js"></script> 放在
- 关键 CSS（如 header、hero 区样式）必须内联在
<style></style> 中；其余 CSS 用 <link rel="preload" as="style"> + <link rel="stylesheet" media="print" onload="this.media='all'"> 异步加载
-
<script></script> 标签禁止出现在 async 或 defer；第三方分析脚本用 async，模块化业务逻辑用 defer
- 图片加
loading="lazy"，隐藏内容（如折叠面板）初始不渲染，用 JS 动态插入
- 删掉已废弃属性：
language、type="text/javascript"、空 class=""、没被 JS/CSS 引用的 id
最常被忽略的点：语义错误比标签多更致命——一个错用的 <section></section> 会让屏幕阅读器跳过整块内容，SEO 爬虫抓不到主干，而浏览器还得为它多建一棵子树。优化 HTML，先问结构有没有意义，再谈压缩和加载。
<section></section> 必须带标题（<h1></h1>–<h6></h6>），否则浏览器视为无效语义；它代表可独立分发的内容单元（如一篇博客正文），不是视觉上的“一块区域”<aside></aside> 不是侧边栏容器，而是与当前内容相关但可剥离的补充信息（如术语解释、引用来源）；纯广告位请用 <div role="complementary">
<li>
<code><main></main> 全局只能出现一次，且不能嵌套在 <article></article> 或 <section></section> 内；它包裹的是页面核心内容，不是“除了 header 和 footer 之外的所有东西”<div> 依然合法——强行套 <code><section></section> 反而破坏可访问性
DOM 嵌套超过 4 层，渲染就开始掉帧
浏览器构建 DOM 树是深度优先遍历，每多一层嵌套，解析耗时、CSS 选择器匹配成本、重排开销都非线性上升。实测中，5 层以上嵌套在低端设备上首屏延迟可达 50ms：
- 用开发者工具 Elements 面板按
Ctrl+Shift+C定位深层节点，重点查<div> 套 <code><div> 的区域 <li>Flex/Grid 能直接替代 2–3 层包裹：比如三栏布局，老写法要 <code><div class="row"> + 三个 <code><div class="col">；新写法让 <code><main></main>自己设display: grid，子元素直接是语义化区块 - React/Vue 组件默认可能注入多余根节点，开启
Fragment或使用v-for的:key直接渲染子元素，跳过一层 -
display: contents能让父容器不参与盒模型，但会剥离可访问性树节点，慎用 - 关键 CSS（如 header、hero 区样式）必须内联在
<style></style>中；其余 CSS 用<link rel="preload" as="style">+<link rel="stylesheet" media="print" onload="this.media='all'">异步加载 -
<script></script>标签禁止出现在且无async或defer；第三方分析脚本用async，模块化业务逻辑用defer - 图片加
loading="lazy"，隐藏内容（如折叠面板）初始不渲染，用 JS 动态插入 - 删掉已废弃属性：
language、type="text/javascript"、空class=""、没被 JS/CSS 引用的id
资源加载顺序错了，代码再干净也白搭
一个没加 defer 的 <script src="app.js"></script> 放在 里，会立刻中断 HTML 解析——此时连 都没生成，用户看到白屏。这不是 JS 慢，是 HTML 加载被卡死：
最常被忽略的点：语义错误比标签多更致命——一个错用的 <section></section> 会让屏幕阅读器跳过整块内容，SEO 爬虫抓不到主干，而浏览器还得为它多建一棵子树。优化 HTML，先问结构有没有意义，再谈压缩和加载。
