link[rel="stylesheet"]是同步阻塞点，html解析器遇之即暂停dom构建，须等css下载、解析完成并生成cssom后才继续，以保障样式与js行为一致。
因为 link[rel="stylesheet"] 是浏览器渲染流水线中的同步阻塞点：HTML 解析器一碰到它，就立刻暂停 DOM 构建，等 CSS 下载、解析完成并生成 CSSOM 后才继续——这不是 bug，是浏览器保障样式与 JS 行为一致的强制机制。
为什么放对位置还是白屏
即使 link 写在 顶部，以下三件事仍会让首屏卡住：
-
<style></style>前面插了任何标签（哪怕一个<meta name="description">）→ 关键 CSS 解析延迟 - 服务器返回的 CSS 文件 gzip 后超过 14.6KB → TTFB + 下载耗时拉长，
First Contentful Paint直接挂起 - CSS 文件里含
@import url()→ 串行加载，第二层样式要等第一层下载+解析完才发起请求
为什么挪到 底部反而更糟
HTML 解析器是顺序执行的，link 出现在哪一行，就卡在哪一行。挪到底部只会导致：
- DOM 已构建完毕但无样式，用户看到 FOUC（无样式内容闪现）
- 后续 JS 调用
getComputedStyle()或offsetHeight读到错误值 - 旧版 Safari 可能因此触发意外重排
- Webpack/Vite 输出的
link若被手动移动，会破坏资源优先级和缓存复用逻辑
如何判断哪条 link 在拖慢首屏
打开 Chrome DevTools → Network 面板，筛选 css，按 Start Time 排序：
- 如果某条
link的Start Time晚于DOMContentLoaded→ 前面有同步<script></script>或 DNS 查询卡住了它 - 某条 CSS 的 Waterfall 显示长时间
Queued或Connecting→ 检查是否跨域、是否漏了<link rel="preconnect"> - 某条 CSS 的
End Time晚于First Paint→ 它就是白屏元凶，必须拆出关键部分内联
真正容易被忽略的是：@import 不在 HTML 层，却比 link 多一层同步阻塞；非关键 CSS 里若含 @font-face 或大图背景，这些子资源会在样式挂载后才拉取，照样挤占首屏带宽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
