精简HTML结构核心是降低浏览器解析负担：嵌套超6层或DOM节点超800个会显著拖慢FCP，须用Chrome DevTools查depth值并重构；语义化标签可触发引擎预设优化路径，删div前需确认其布局/语义职责。
精简 HTML 结构不是为了“看起来干净”，而是减少浏览器解析时的计算负担——每多一层嵌套、每个无意义的 <div>、每处冗余标签，都会拖慢 DOM 构建、样式匹配和首屏绘制。
用语义化标签替代 div 堆叠
浏览器对 <header>、<nav>、<main>、<section> 等标签有预设解析路径和早期优化策略，比如 Chrome 遇到 <main> 会提前标记首屏边界，影响 LCP 计算时机。而一堆 <div class="wrapper"><div class="inner"><div class="content"> 不仅增加节点数，还迫使浏览器额外推断作用域和继承关系。
- 把
<div class="header"><div class="logo">...</div></div>直接改为<header><h1>...</h1></header> - 列表结构用
<ul><li>，图文组合用<figure><img><figcaption>，折叠内容用<details> - 避免“为语义而语义”：按钮不需要包在
<section>里，<section>应包裹带标题的独立主题块
控制嵌套深度，避免超三层结构
嵌套超过三层后，DOM 构建成本非线性上升；实测显示，某容器下嵌套超 5 层且子节点总数超 200 时，首次绘制（FP）平均延迟 80–120ms。移动端 WebView 中更明显，甚至可能触发解析器保护机制导致后续标签不进 DOM 树。
- 检查方式：Chrome DevTools → Elements → 右键节点 → “Show DOM properties”，看 depth 值是否 > 6
- 合并相邻包裹层：
<div class="wrapper"><div class="inner">...</div></div>→<div class="wrapper inner">...</div> - 禁用
<table>布局，尤其避免<td>内再嵌套多层<div>，这类结构极易引发重排和解析卡顿
删减冗余内容与无效标签
HTML 文件里的空格、换行、注释虽不影响渲染，但会延长解析时间；每个字符都要被 tokenizer 扫描，冗余越多，初始字节流越长，首字节（TTFB）后解析启动越慢。
立即学习“前端免费学习笔记（深入）”；
- 移除开发阶段遗留的
<!-- TODO: xxx -->、<div id="debug">等测试标签 - 生产环境部署前用 html-minifier 等工具压缩，或启用服务端 Gzip/Brotli（可减小体积 50%+）
- 避免在
<head>中写无逻辑内联脚本，如<script>console.log(1)</script>，它强制阻塞解析
配合关键加载策略协同生效
结构精简必须和资源调度配合，否则效果打折。例如：即使 DOM 很浅，若关键 JS 放在 <head> 且没加 defer，浏览器仍会停住解析；又如 preload 字体漏掉 crossorigin，字体请求会被拒绝，反而延长文本渲染时间。
-
<script src="app.js"></script>必须加defer（依赖 DOM）或async（完全独立） -
<link rel="preload" href="font.woff2" as="font" crossorigin>缺一不可，否则优先级错乱或加载失败 - 非首屏图片统一加
loading="lazy"，首屏图片则显式设置width和height防止布局偏移
