html首屏加载慢的根源在于阻塞行为而非文件体积，关键包括：未设宽高的图片引发重排、@import增加网络往返、script未用defer/async导致解析中断、内联css超1kb拖慢ttfb、缺失content-type降级解析优先级。
HTML 代码质量不是“写得整不整洁”的风格问题，而是直接影响首屏能否在 1 秒内出内容的硬性约束。差的 HTML 结构会让浏览器反复重排、卡住解析、错判资源优先级——哪怕 CSS 和 JS 都压缩到极致，首屏照样白屏 2 秒以上。
为什么 DOMContentLoaded 快但页面还是白屏
常见现象是 DOMContentLoaded 在 800ms 触发，但 FCP 却拖到 2.5s+。这说明 DOM 树建好了，但渲染树（Render Tree）卡住了：要么关键 CSS 没加载完，要么 JS 执行阻塞了样式计算或布局。
- 检查 Network 面板里所有
.css和.js请求的Initiator列：显示parser的就是 HTML 解析中途同步拉取的，属于高危阻塞点 -
@import在 CSS 文件里出现一次，就会额外增加一次网络往返，实测拖慢FCP超 300ms，必须替换成<link rel="stylesheet"> - 服务端返回的
Content-Type: text/html缺失或被中间件覆盖，会导致浏览器降级为低优先级解析，document请求的 Priority 显示为Medium或更低
script 标签放哪儿、加什么属性才不打断解析
默认的 <script src="app.js"></script> 是同步阻塞模式：HTML 解析停 → 下载 JS → 执行 JS → 继续解析。这不是“慢”，是“卡死”。
- 依赖 DOM 且有执行顺序要求（如 Vue mount、React hydrate）：用
defer，脚本并行下载，按顺序在DOMContentLoaded前执行 - 完全无 DOM 依赖、可随时执行（如
analytics.js）：用async，下载完立刻执行，不保序也不等 DOM - 现代项目优先用
<script type="module" defer></script>：天然支持defer行为，还能静态分析 import 依赖，但注意旧版 Safari 兼容性 - 绝对不要手动把 script 拖到
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
