关键css必须内联，外部link仅承载非关键样式；白屏主因是style前有标签、css体积过大或含@import；需用preload+onload组合并保留原link以支持spa样式复用。
关键 CSS 必须内联，外部 link 标签只能承载非关键样式——否则首屏必然白屏或 FOUC。
为什么放对位置还是白屏
浏览器解析 HTML 是字节流式进行的，link[rel="stylesheet"] 一旦出现在 里，就立即触发阻塞：DOM 构建暂停，直到 CSSOM 完全构建完毕。但“放对位置”只是前提，真正卡住首屏的是三件事：
-
<style></style>前面插了任何标签（哪怕一个<meta name="description">）→ 关键 CSS 解析延迟 - 服务器返回的 CSS 文件体积过大（>14.6KB gzip 后）→ TTFB + 下载耗时拉长，首屏绘制（FCP）直接挂起
- CSS 文件含
@import url()→ 串行加载，第二层样式要等第一层下载+解析完才发起请求
如何判断哪条在拖慢首屏
打开 Chrome DevTools → Network 面板，筛选 css，按 Start Time 排序，重点看：
- 是否所有
link的Start Time都早于DOMContentLoaded？如果不是，说明前面有同步<script></script>或 DNS 查询卡住了它 - 某条 CSS 的 Waterfall 显示长时间
Queued或Connecting→ 检查是否跨域、是否未配置preconnect - 某条 CSS 的
End Time晚于First Paint→ 它就是首屏白屏元凶，必须拆出关键部分内联
preload + onload 组合怎么写才不翻车
rel="preload" 只下载不解析，必须配对 onload 切换为样式表，漏掉任一环都无效：
- 必须写两行：
<link rel="preload" href="critical.css" as="style">（放最顶部） +<link rel="stylesheet" href="critical.css">（保持原位置） -
as="style"缺失 → 请求优先级降为 Low，可能被字体、图片抢占带宽 -
onload="this.rel='stylesheet'"不能省略；只靠 preload 不会自动应用样式 - 必须加降级：
<noscript><link rel="stylesheet" href="critical.css"></noscript>，否则 JS 失效时样式永久丢失
非关键 CSS 怎么彻底不进首屏链路
不是“放后面”就行，而是要让浏览器从一开始就不把它当首屏依赖：
- 用
media属性切断阻塞：<link rel="stylesheet" href="theme-dark.css" media="(prefers-color-scheme: dark)">，不匹配时完全不下载 - 打印样式必须写
media="print"，别用media="screen"—— 后者默认匹配，照样阻塞 - 响应式组件样式（如侧边栏、弹窗）用
media="(min-width: 1024px)"隔离，移动端不会加载 - 绝对不要在 CSS 文件里写
@import，它比link多一层同步阻塞，且无法被构建工具提取或预加载
最容易被忽略的点：关键 CSS 内联后，对应的外部 link 仍要保留在 中——不是为了首屏，而是为了后续路由切换、动态内容插入时能复用完整样式规则。删掉它，SPA 跳转后新渲染的 DOM 就会丢样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
