异步加载第三方样式库可提升页面初始加载速度。1. 使用JavaScript动态插入link标签，实现非阻塞加载，但可能出现FOUC；2. 利用preload预加载并 onload后切换rel为stylesheet，提前下载且不立即应用；3. 设置media为无效值延迟应用，再通过JS激活；4. 注意关键样式同步加载，非关键资源异步，结合缓存优化体验。
异步加载第三方样式库可以提升页面初始加载速度，避免阻塞渲染。虽然 CSS 默认是阻塞渲染的资源，但可以通过一些技巧实现“异步”加载的效果。
1. 使用 JavaScript 动态插入 link 标签
通过 JS 创建 link 元素并添加到 head 中，可以让浏览器在 DOM 构建完成后才发起 CSS 请求，从而实现非阻塞加载。
- 不会阻塞页面解析（HTML 可继续解析）
- 样式加载完成前可能出现 FOUC（内容闪现）
示例代码：
function loadCSS(href) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
document.head.appendChild(link);
}
// 异步加载 Bootstrap CDN
loadCSS('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css');
2. 使用 preload + onload 切换 rel
利用 rel="preload" 声明预加载资源，等加载完成后再切换为 rel="stylesheet"，实现异步且可控的加载方式。
立即学习“前端免费学习笔记（深入）”；
这种方式能提前开始下载，又不立即应用样式。
function preloadCSS(href) {
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'style';
link.href = href;
link.onload = () => {
link.rel = 'stylesheet'; // 加载完成后激活
};
document.head.appendChild(link);
}
preloadCSS('https://cdn.example.com/library.css');
3. 添加 media 属性延迟应用
设置一个无效的 media 查询，让浏览器异步下载而不阻塞渲染，再通过 JS 修改为 all 激活样式。
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cdn.example.com/theme.css';
link.media = 'print'; // 初始不生效
document.head.appendChild(link);
// 稍后激活（例如页面加载后）
window.onload = () => {
link.media = 'all';
};
4. 注意事项与优化建议
异步加载样式需权衡体验和性能：
- 关键样式仍应内联或同步加载，避免布局跳动
- 非关键 UI 库（如图标库、主题）适合异步
- 考虑使用
onload回调处理依赖顺序 - 可配合
sessionStorage缓存已加载状态，减少重复请求
基本上就这些方法，核心思路是绕过浏览器默认的渲染阻塞机制，用脚本控制加载时机。虽然不能像 JS 那样完全自由异步，但通过预加载和动态注入，也能达到接近异步的效果。
