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