非关键CSS必然阻塞DOM渲染，解决核心是延迟其下载或应用时机；media="print"+onload是最轻量兼容方案，利用浏览器对print媒体的异步处理逻辑，onload中须立即执行this.media='all'并置空onload以避免重复触发。
非关键 CSS 一定会阻塞 DOM 渲染，这是浏览器规范行为，不是 bug。解决思路只有一个：不让它参与初始 CSSOM 构建。核心手段是「延迟下载时机」或「延迟应用时机」，而不是“取消加载”。
用 media="print" + onload 是最轻量且兼容性最好的方案
这是目前无需 JS、不依赖构建工具、连 IE11 都能跑通的硬核解法。原理是利用浏览器对 media="print" 的低优先级处理逻辑——它会异步下载，不阻塞 HTML 解析和渲染。
-
media="print"不是“假装打印”，而是真实触发浏览器降级为非阻塞加载路径 -
onload回调里必须立刻执行this.media='all'，否则样式永远不会生效 - 必须加
this.onload=null，否则在某些旧版 Safari 中可能重复触发 - 写法必须严格：
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'; this.onload=null;">
用 rel="preload" + onload 切换 rel 更适合关键但非首屏的 CSS
当你要预加载某个 CSS（比如主题切换用的 dark.css），又不想让它干扰首屏 LCP，rel="preload" 是更主动的选择。但它不是“开箱即用”的异步方案，漏掉任一环节就白忙活。
-
as="style"必须写，否则 Chrome/Firefox 会忽略优先级提升，甚至不进预加载队列 -
href值要和后续插入的<link rel="stylesheet">完全一致（含 query 参数），否则缓存不复用 - 只对真正需要提前下载的资源用，比如用户点击“深色模式”前就该下好的文件
- 务必配
<noscript><link rel="stylesheet" href="..."></noscript>，Safari 11.1 以下和禁 JS 场景靠它兜底
动态创建 <link> 标签时，onload 监听不可靠
很多人直接 document.head.appendChild(link) 就以为完事了，结果发现 link.onload 在 Firefox 和部分 Android WebView 中根本不会触发——这不是你代码写错，是浏览器实现差异。
立即学习“前端免费学习笔记（深入）”；
- Firefox 从 69 开始才支持
link.onload，旧版本需 fallback 到link.onreadystatechange - 更稳妥的做法是用
loadCSS库，它内部已封装兼容逻辑：loadCSS("theme.css") - 如果坚持手写，建议用
requestIdleCallback或setTimeout(..., 0)延后插入，避免在DOMContentLoaded前瞬间插入导致 FOUC - 永远检查
document.currentScript是否存在，老版 Android WebView 里它是null
容易被忽略的细节：内联关键 CSS 比折腾异步更重要
所有异步方案都建立在一个前提上：你已经把首屏必需的 CSS 内联进 <head>。如果还指望靠异步加载来补救首屏样式缺失，那只是把问题往后拖。
- 内联部分应控制在 14KB 以内（TCP 初始拥塞窗口限制）
- 不要内联
@import，它会触发额外 HTTP 请求并阻塞 - 异步加载的 CSS 里不要再包含
@font-face，字体加载会二次阻塞渲染 - 如果你用了
media="(prefers-reduced-motion: reduce)"这类媒体查询，注意它影响的是“是否下载”，不是“是否应用”——匹配即发起请求
