浏览器默认阻塞渲染是因为必须构建cssom后才能安全渲染，防止fouc；非关键css需用rel="preload"+onload切换为stylesheet或media="print"+js切换，并配降级。
为什么默认会阻塞渲染
浏览器遇到 link rel="stylesheet" 时，必须暂停 HTML 解析、下载并构建 CSSOM 后才能继续渲染。这不是 bug，而是规范要求——否则可能渲染出错乱的布局或闪烁内容（FOUC）。但这也意味着：一个卡住的 CSS 文件（如超时、路径错误、大体积），会让整个首屏白屏或延迟。
- 阻塞发生在解析阶段，不是下载完成才停；即使 CSS 文件很小，只要没开始下载，HTML 解析就等
- 多个
link按顺序串行阻塞：前一个没建好 CSSOM，后一个连下载都不启动 -
media属性可绕过阻塞，但仅限值为非匹配条件时（如media="print"在屏幕浏览时不加载）
怎样让非关键 CSS 不阻塞首屏
关键思路是：把首屏必需的样式“内联”，其余 CSS 改成异步加载。不能删 link，但可以骗浏览器先不把它当样式表处理。
- 用
rel="preload"提前拉取文件，再 onload 时切换为rel="stylesheet"：<link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'">
- 配合
media="print"触发异步下载，再 JS 切换：<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
- 务必加
<noscript></noscript>回退：<noscript><link rel="stylesheet" href="non-critical.css"></noscript>
- 不要在
onload里写复杂逻辑，只做this.rel='stylesheet'或this.media='all'这类单次赋值
路径和 rel 属性写错会导致“静默失效”
CSS 文件明明存在、Network 面板显示 200，但页面就是没样式——八成是 rel 漏了或 href 算错了基准。这种问题不报错，排查成本高。
-
rel必须是"stylesheet"（全小写，不能拼错、不能大小写混用如"StyleSheet"） -
href是相对 HTML 文件位置，不是当前 CSS 或 JS 文件；href="css/main.css"表示和 HTML 同目录下有css/文件夹 - 本地双击打开 HTML（
file://协议）时，多数浏览器直接拒绝加载外部 CSS，开发阶段必须起本地服务（如python3 -m http.server） - 服务器返回的
Content-Type必须是text/css，不是text/plain或空；检查 Network 面板 Response Headers
多个 CSS 文件的加载顺序不能乱
浏览器按 link 出现顺序依次阻塞加载，顺序直接影响样式覆盖结果和首屏性能。把最慢、最不重要的 CSS 放最后，甚至拆出来异步。
- 推荐顺序：
reset.css→variables.css→framework.css（如 Tailwind）→components.css→page.css - 避免把巨体积的
vendor.css放在head末尾——它前面的 CSS 加载完，它才开始下载，首屏仍被拖累 - 如果某 CSS 只用于特定页面（如后台管理页），不要全局引入，改用 JS 动态创建
link按需注入 - 慎用
@import：它在 CSS 文件内部使用，强制串行加载，且无法被preload或 CDN 预连接优化
onload 事件触发时机，只保证下载完成，不保证解析完毕。需要样式强依赖的 JS 逻辑（比如读取 getComputedStyle），得额外监听 document.styleSheets 或用 requestIdleCallback 做兜底。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
