使用 preload+onload 是推荐的异步加载 CSS 方案，通过 rel="preload" 高优先级下载不阻塞渲染，在 onload 时改为 rel="stylesheet" 启用样式，结合动态创建 link 可实现非阻塞且可控的加载时机，避免页面闪动。
通过
link
标签
异步加载
CSS，核心思路是避免阻塞页面渲染的同时，确保样式最终生效。标准的 link 标签会阻塞渲染直到 CSS 下载完成，而异步加载可以通过一些技巧绕过这种阻塞行为。
使用 preload + onload 动态切换 rel
preload 是一种告诉浏览器提前下载资源但不立即应用的方式。结合 JavaScript 可以在下载完成后将其转换为可应用的样式表。
示例代码：
说明：
rel="preload" as="style" 让浏览器高优先级下载 CSS 文件，但不阻塞渲染。
onload 触发时将 rel 从 preload 改为 stylesheet，正式启用样式。
添加 this.onload=null 防止事件重复触发。
动态创建 link 标签插入 head
完全通过 JavaScript 创建 link 标签，实现异步非阻塞加载。
示例代码：
优点：
完全异步，不阻塞解析和渲染。
可控制加载时机（如滚动后、交互后）。
使用 media 属性延迟加载非关键 CSS
将非关键 CSS 设置为只在特定媒体条件下加载，比如 print 或自定义无效 media，使其低优先级。
示例：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
原理：
初始 media="print" 浏览器不会立即应用。
onload 后改为 media="all" 正式启用。
适合非首屏必须的样式。
基本上就这些方法。推荐使用 preload + onload 方案，兼容性较好且能利用浏览器预加载机制。关键是不让 CSS 阻塞首次渲染，又能尽快应用样式，避免页面闪动。不复杂但容易忽略细节，比如事件去重和错误处理。