css放head中导致白屏更久是因为link rel="stylesheet"默认阻塞渲染，浏览器会暂停dom构建和绘制直至css下载解析完成；解耦需用media属性或内联关键css。
为什么CSS放里反而让页面白屏更久
因为 <link rel="stylesheet"> 默认阻塞渲染，浏览器解析到它就会停住 DOM 构建和页面绘制，直到该 CSS 下载并解析完成。哪怕这个样式只用在页脚，只要它在 里， 内容就卡住不动——这不是“加载慢”，是“被强制暂停”。实测一个 200KB 的 main.css 在弱网下耗时 800ms，期间页面完全白屏。
关键点：rel="stylesheet" 天生就是 render-blocking；真正解耦靠的是 media 属性：
-
media="print"或media="(min-width: 1024px)"（当前不匹配）→ 异步加载，不阻塞 -
media="all"（默认）、media="screen"→ 始终阻塞 - 多个
<link>按 DOM 顺序串行加载：前一个没就绪，后一个根本不会发请求
关键CSS必须内联，但不能超14KB
首屏必需样式（比如 header、hero banner、按钮、@font-face）要提取出来，直接写进 的 <style></style> 标签里。不是整站 CSS，通常只占原始体积的 10%–30%。
内联有硬性要求：
- 必须放在所有
<link rel="stylesheet">之前，否则仍可能被后续资源拖慢 - 禁止在
<style></style>中用@import——它会触发额外 HTTP 请求并阻塞解析 - 若启用 CSP，需加
nonce（如<style nonce="abc123"></style>），并在响应头中同步配置 - 内联内容建议控制在 ~14KB（gzip 后约 4–8KB），避免跨 TCP 包影响 TTFB
defer 和 async 不是万能钥匙，用错反而更慢
defer 表示等 HTML 解析完再执行 JS，且按顺序执行；async 是下载完立刻执行，不保证顺序。但两者都只对外部脚本有效，且有隐藏陷阱：
- 同时写
defer和async，defer会失效 -
async脚本若依赖 DOM 或其他 JS，很可能报Cannot read property 'xxx' of null - 未加属性的
<script src="xxx.js"></script>会阻塞 HTML 解析，页面卡在前 - JS 执行前，浏览器必须等 CSSOM 构建完成——所以就算 JS 放在
前，它仍会被前面的<link rel="stylesheet">拖住
preload 和 @import 是最容易踩坑的两个点
<link rel="preload" as="style"> 常被误当成“加速加载”，但它只提前下载，不改变应用时机。只写它不写对应 <link rel="stylesheet">，样式根本不会生效。
@import 在 CSS 文件里引入其他样式，会串行阻塞，比 <link> 多一次网络往返，实测拖慢 FCP 300ms+。
容易被忽略的细节：
-
preload和配对的rel="stylesheet"的href字符串必须完全一致（大小写、路径都不能差） -
preload不解决阻塞问题，只是“提前拿”，真正解耦还得靠media或内联 - 非首屏模块（折叠区域、模态框、图表库）的 CSS 应用
media="print" onload="this.media='all'"，IE 需降级 fallback
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
