最轻量稳妥的异步css加载方案是，利用media="print"使浏览器降级为低优先级异步加载、不阻塞渲染，onload后切回media="all"生效。
直接用 <link rel="stylesheet" href="xxx.css" media="print" onload="this.media='all'; this.onload=null;"> 就行，不用 JS、兼容性好、不阻塞渲染——这是目前最轻量也最稳妥的方案。
为什么 media="print" 能实现异步
浏览器看到 media="print" 会认为该 CSS 和当前屏幕环境无关，自动降级为低优先级异步加载，完全不参与关键渲染路径。等文件下载完成触发 onload，再把 media 改回 "all"，样式立刻生效。
常见错误现象：
-
media="bogus"或media="only x"在部分旧版 Safari 中不触发onload - 漏写
this.onload=null，导致重复切换媒体类型（尤其在缓存命中时） - 把这行写在
里——必须放在中才能被预加载器识别
rel="preload" + onload 切换 rel 的坑在哪
这个组合看似更“现代”，但实际落地容易翻车：
- 必须显式写
as="style"，否则 Chrome/Firefox 不会复用预加载资源，等于白写 - IE 完全不支持
rel="preload"，需配<noscript></noscript>回退，否则无样式 -
onload触发后只是下载完成，CSSOM 解析可能还没开始，立即操作 DOM 样式仍可能失效 - 多个
preload并发时，资源调度优先级可能挤压首屏关键 JS/CSS
示例中易错写法：<link rel="preload" href="main.css" onload="this.rel='stylesheet'"> —— 缺 as="style"，Chrome 下不会生效。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
JavaScript 动态加载时，onload 为什么不能信
link.onload 只代表 HTTP 响应完成（200 OK），不代表 CSS 已注入 document.styleSheets，更不代表浏览器已完成 CSSOM 构建和重排。
- 在低端 Android 设备或高并发场景下，
onload后getComputedStyle(el).color仍可能是空值 - @import、@font-face 不会触发父
<link>的onload，但会影响最终样式就绪时间 - 推荐验证方式：用
requestAnimationFrame轮询一个明确由该 CSS 设置的非继承属性，比如background-color或font-family
不要用 setTimeout 硬等 100ms，网络抖动时不可靠；也不要依赖 document.styleSheets.length，它可能提前增加但规则未生效。
loadCSS 库的插入位置和媒体参数怎么选
loadCSS() 默认插在最后一个 <link> 或 <script></script> 后，但你得知道它不是万能胶：
- 如果页面有多个动态 CSS，插入顺序影响层叠权重，
before参数必须指向已存在的节点，传null会 fallback 到document.head末尾 -
media参数设成"screen and (min-width: 768px)"时，匹配失败会导致样式表永不激活，且不触发onload - 传入
integrity时，必须配合crossorigin，否则 SRI 校验静默失败（无报错，但样式不加载）
最容易被忽略的一点：所有通过 JS 插入的 <link>，都必须在 document.head 内，插到 里会被浏览器自动移到 ，但期间可能引发重排抖动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
