无阻塞渲染指内联关键css、延迟加载非关键css以避免阻塞首屏渲染。核心是按用户首屏可见性判断css必要性，用rel="preload" as="style" + onload注入非关键样式，禁用media="print"切换方案。
什么是“无阻塞渲染”的CSS加载
浏览器遇到 <link rel="stylesheet"> 会立即暂停HTML解析，直到样式表下载、解析完成——这是默认行为，也是阻塞根源。所谓“无阻塞”，不是不用CSS，而是让**关键样式内联、非关键样式延迟加载且不阻断首屏渲染**。
核心判断标准：用户在首屏看到内容前，是否必须依赖某段CSS？如果不是，它就属于可延时加载的非关键样式。
rel="preload" + onload 动态注入非关键CSS
这是目前最可靠、兼容性好（Chrome 50+、Firefox 46+、Safari 11.1+）、不触发阻塞的方案。它绕过常规 <link rel="stylesheet"> 的阻塞逻辑，用 <link rel="preload"> 提前拉取资源，再通过JS控制何时注入为样式表。
- 必须用
rel="preload"，不能用rel="prefetch"（后者不保证优先级，也不触发onload） -
as="style"属性不可省略，否则浏览器不会按样式表类型预加载 - 注入后需手动创建
<style></style>或<link rel="stylesheet">标签，仅 preload 不会生效 - 务必监听
onload，而非onreadystatechange（IE已淘汰，且不可靠）
<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>
为什么不能直接用 rel="stylesheet" media="print" 切换
这个技巧曾被广泛使用：先设 media="print" 让样式表不阻塞渲染，再用JS切换为 media="all"。但它有硬伤：
- 部分浏览器（如旧版Safari）在切换
media时仍会重排重绘，影响性能 - 如果JS执行失败或被拦截，样式永久不生效，页面错乱
- 无法区分加载失败场景——
onload可捕获失败，而media切换完全静默 - 现代Lighthouse会警告该模式“未正确加载CSS”，影响性能评分
内联关键CSS + 外链非关键CSS 的边界怎么划
没有固定字节数标准，但可依据真实用户交互路径判断：
- 首屏可见区域内的所有元素样式（含伪类如
:hover若首屏有按钮）必须内联 - 折叠面板、模态框、分页之后的内容样式，属于典型非关键CSS
- 字体图标（如
@font-face）若只用于非首屏图标，应移出关键CSS - 慎用工具自动提取“above-the-fold CSS”——它们常误判响应式断点、JS动态插入的DOM结构
最容易被忽略的是：CSS中引用的字体、图片等资源，即使CSS本身非关键，其依赖资源若体积大、域名远，仍会拖慢整体加载节奏。延时加载CSS前，先检查它的 @import 和 url() 引用是否可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
