link rel="stylesheet"会阻塞渲染，因浏览器将其视为渲染关键资源，必须完成cssom构建才能合成渲染树，故暂停html解析、推迟fp/fcp；即使css仅影响非首屏区域也强制阻塞。
为什么 link rel="stylesheet" 会阻塞渲染
浏览器遇到 <link rel="stylesheet"> 时，会暂停 HTML 解析、推迟首次绘制（FP）和首次内容绘制（FCP），直到该 CSS 下载并解析完成。哪怕它只影响页脚或弹窗这类非首屏区域，也照卡不误。这不是 bug，是规范行为——CSS 被视为“渲染关键资源”，浏览器必须确保样式就绪后才敢渲染，否则可能闪动或错位。
用 rel="preload" + onload 实现真正异步加载
这是目前兼容性好、无需构建工具介入的通用方案。核心是把 CSS 当作“可延迟解析的资源”来预加载，再手动挂载：
<link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="non-critical.css"></noscript>
注意几个关键点：
-
as="style"必须显式声明，否则预加载不会提升优先级，甚至被忽略 -
onload回调里要立即清空自身（this.onload=null），否则在某些旧版 Safari 中会重复执行 -
<noscript></noscript>是兜底：禁用 JS 时仍能加载样式，避免功能降级 - 不要用
rel="prefetch"替代——它优先级太低，常被浏览器丢弃
media 属性不是异步，但能绕过阻塞
<link rel="stylesheet" href="print.css" media="print"> 这类带非匹配 media 的样式表，浏览器会下载但**不解析、不阻塞渲染**，直到媒体查询匹配（比如用户打开打印预览）。可用于：
- 暗色模式样式：
media="(prefers-color-scheme: dark)" - 宽屏布局：
media="(min-width: 1200px)" - 仅用于 JS 动态切换的皮肤文件
但它不适用于“始终需要但非首屏”的场景——比如评论区样式，用户一进页面就要，只是不在首屏视口内。这种仍需 preload + onload 方案。
容易被忽略的细节：内联关键 CSS 必须真实“关键”
很多人把“首屏 DOM 结构涉及的所有 class”全塞进 <style></style>，结果内联 CSS 体积暴涨到 80KB，反而拖慢 HTML 传输和解析。真正的关键 CSS 应只包含：
- 首屏可见区域内所有元素的
display、position、font-size、color等直接影响布局与绘制的声明 - 不包含
@keyframes、伪类悬停态（:hover）、动画、媒体查询块（除非首屏强依赖） - 避免使用通配符选择器（
*{}）、深层嵌套（.a .b .c .d{}）等低效写法
工具如 critical 或 penthouse 可自动提取，但务必人工复核——自动化常把导航栏下拉菜单的隐藏态样式也拎进来，其实它根本不需要在首屏就解析。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
