唯一真正非阻塞的CSS加载方式是rel="preload" as="style"配合onload动态注入，因其提前请求且不解析、不阻塞渲染，仅在onload后切换为stylesheet才生效，兼顾性能与兼容性。
as 属性本身不能让 <style> 无阻塞——它根本不适用于 <style> 标签。
浏览器规范里，as 是 <link rel="preload"> 的专属属性，只用于提示预加载资源的类型，比如：
<link rel="preload" href="main.css" as="style">
但注意：这行代码不会把 CSS 变成非阻塞，它只是告诉浏览器“请尽快下载这个 CSS”，而该 CSS 后续仍会以标准方式参与 CSSOM 构建，依然阻塞渲染（只要 media 匹配）。
<link rel="stylesheet"> 怎么才算“无阻塞”？
真正能绕过阻塞的只有两种合法路径：
立即学习“前端免费学习笔记（深入）”；
-
使用不匹配当前设备的
media属性，例如：-
<link rel="stylesheet" href="print.css" media="print">→ 不阻塞页面渲染 -
<link rel="stylesheet" href="mobile.css" media="(max-width: 767px)">→ 在桌面端不阻塞
-
-
把
rel="stylesheet"换成rel="preload"+ JS 动态注入（手动控制时机）：<link rel="preload" href="async.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
⚠️ 注意：
onload在部分旧浏览器（如 Safari
为什么不能给 <style> 加 as 或 async？
-
<style>是内联样式块，天生同步解析、同步阻塞 HTML parser； - 它没有
src，不走网络请求，as对它无意义； - 它不支持
async、defer、crossorigin等脚本/链接专属属性； - 所有浏览器遇到
<style>都会立即暂停 HTML 解析，构建 CSSOM。
常见错误现象
- 写了
<style as="style">...→ 浏览器直接忽略as，无报错但毫无作用； - 把
<link rel="stylesheet">放在<script>后面 → CSS 仍阻塞，JS 反而可能因 DOM 尚未就绪而执行失败； - 用
@import在<style>里加载外部 CSS → 额外阻塞、无法并行、无缓存、验证失败。
关键点就一个：<style> 没有“无阻塞”模式，它的存在本身就是阻塞前提。
想减少阻塞，唯一靠谱做法是——把非首屏、非关键样式抽离为 media 不匹配的 <link>，或用 JS 控制注入时机。
