link rel="stylesheet"默认阻塞渲染，因浏览器强制暂停DOM构建，须等CSS下载解析为CSSOM并与DOM合成渲染树后才绘制；哪怕1KB文件也会卡住首屏<h1>或大图。
link rel="stylesheet" 为什么默认阻塞渲染
因为浏览器规范强制要求：解析 HTML 遇到 link[rel="stylesheet"]，必须暂停 DOM 构建，等对应 CSS 下载完成、解析为 CSSOM，并与 DOM 合并成渲染树后，才能继续绘制。这不是“慢”，而是硬性依赖——哪怕只有 1KB 的 main.css，也会卡住首屏 <h1> 或大图的首次渲染。
哪些情况会让阻塞更严重
真正放大白屏时间的不是“用了 link”，而是下面这些常见组合：
-
<style>标签前存在任何同步标签（比如<script src="sync.js">或<meta name="viewport">）→ 关键样式解析被延迟 - CSS 文件体积 >14.6KB（gzip 后）→ TTFB + 下载耗时直接拉长 FCP
- CSS 文件内含
@import url(...)→ 第二层样式必须等第一层下载+解析完才发起请求，串行阻塞 - 多个
link按顺序写在<head>里 → 前一个没就绪，后一个根本不会发起请求（HTTP/1.1 下尤为明显）
media 属性怎么切断阻塞
关键在于：浏览器只对匹配当前环境的 media 值才执行阻塞加载。不匹配时，它会异步下载，且不参与初始 CSSOM 构建。
- 用
media="print"是最稳妥的零 JS 方案：<link rel="stylesheet" href="print.css" media="print" onload="this.media='all'; this.onload=null;"> - 响应式样式用
media="(min-width: 1024px)"，移动端自然跳过 - 主题切换样式用
media="(prefers-color-scheme: dark)"，系统不匹配就不会加载 - 绝对别用
media="screen"—— 它等价于media="all"，照样阻塞
preload + onload 组合为什么容易翻车
这个方案本意是“提前下载但不阻塞”，但漏掉任一环节就会失效：
立即学习“前端免费学习笔记（深入）”；
- 缺
as="style"→ 请求优先级降为 Low，可能被图片或字体抢占带宽 - 没写
onload="this.rel='stylesheet'"→ 文件下完了也不生效，页面永远没样式 - 忘记
<noscript><link rel="stylesheet" href="..."></noscript>→ JS 禁用或 Safari 11.1 以下用户彻底白屏 -
href值不一致（比如一个带?v=1.2，另一个没带）→ 浏览器视为两个资源，重复下载
最容易被忽略的是：即使你把所有非关键 CSS 都挪到 </body> 前，只要它是 rel="stylesheet" 且 media="all"，浏览器依然会在解析到那行时暂停——FOUC 和重排风险一点没少。
