HTML结构影响加载速度是因为浏览器流式解析时，嵌套越深、节点越多，DOM构建成本越高；语义化标签被浏览器优化，解析快8%~12%，而冗余div和注释会延长解析阻塞时间。
为什么 HTML 结构本身会影响加载速度
浏览器是流式解析 HTML 的，从上到下逐行构建 DOM 树。结构越深、节点越多、嵌套越乱，解析和构建成本就越高——这不是“慢在 JS”，而是解析器在反复遍历冗余节点。语义化标签如 <header>、<main>、<nav> 被现代浏览器（Chrome、Safari、Edge）专门优化过解析路径，实测 DOM 构建快 8%~12%；而一堆 <div class="wrapper"><div class="inner"><div class="content"> 不仅体积大，还会触发更多 layout 回溯。
怎么删减 HTML 结构才不翻车
精简不是盲目删标签，而是砍掉无语义、无作用、纯为兼容老写法留下的“僵尸结构”。
- 移除开发残留的
<!-- TODO: remove before prod -->注释——它们虽不渲染，但会延长 parser blocking 时间，尤其在低端设备上明显 - 把多层嵌套的
<div>替换为语义化标签：<section>、<article>、<aside>，同时删掉无意义的 class 层级（比如class="container__wrapper__inner__content"） - 避免用
<table>做布局，改用display: flex或display: grid—— 表格解析开销高，且无法被 CSS containment 优化 - 禁用
document.write()：它会清空当前文档流，本地双击打开file://时尤其致命，直接导致白屏或重定向失败
哪些 HTML 写法会让首屏卡住
很多“慢”不是因为文件大，而是 HTML 里埋了阻塞链路的写法，让浏览器在解析阶段就停住。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<script>放在<head>里且没加defer或async：浏览器立刻暂停解析，下载并执行 JS，DOM 构建完全停滞 -
<link rel="stylesheet">前插了未加defer的脚本：CSSOM 构建会被阻塞，哪怕样式只用于页脚，整页也白屏 - 在
<style>里用@import：它强制串行加载，比并行<link>多一次 RTT，FCP 拖慢 300ms+ -
<iframe src="xxx">直接写在首屏区域：它会阻塞window.onload，且无法被<link rel="preload">提前捞取
内联关键 CSS 和预加载资源的边界在哪
内联和 preload 都是“加速手段”，但滥用反而拖慢首屏——关键在判断“是否真马上要用”。
立即学习“前端免费学习笔记（深入）”；
- 内联的 CSS 必须严格限定在首屏必需范围（
<header>、轮播图、按钮、@font-face），gzip 后控制在 4–8KB（原始约 14KB），超量会挤占 TCP 初始窗口，TTFB 反而升高 -
<link rel="preload">只对as="font"、as="image"、as="script"等明确类型有效；crossorigin属性漏写会导致字体被拒绝加载 - 不要给所有
<script>加preload：它不推迟执行，只抢带宽，可能挤掉真正关键的图片或字体 -
loading="lazy"只对<img>和<iframe>生效，且必须显式设width和height，否则滚动时引发 CLS（布局偏移）
真实瓶颈往往藏在 HTML 解析阶段，而不是后续 JS 执行。一个没加 defer 的统计脚本、一段内联超量的 CSS、一个没设尺寸的懒加载图片，都可能让首屏延迟 1 秒以上——这些点肉眼难察觉，得靠 Network 面板的 waterfall 图定位。
