通过JavaScript动态插入link标签、预加载CSS并延迟应用、使用media属性延迟非关键CSS加载，结合load事件优化体验，实现CSS异步加载，避免阻塞渲染，提升性能。
在 CSS 中实现异步加载样式，主要是为了解决传统 link 标签阻塞页面渲染的问题，从而提升页面加载性能。虽然原生 CSS 加载是阻塞的，但可以通过一些技巧实现“异步”加载效果。
使用 JavaScript 动态插入 link 标签
通过 JavaScript 创建 <link> 标签并插入到页面中，可以让浏览器在 DOM 构建完成后才开始加载 CSS，避免阻塞关键渲染路径。
- 动态创建 link 元素，设置
rel="stylesheet"和href属性 - 添加到
<head>或<body>中触发下载 - 这种方式不会阻塞 HTML 解析
示例代码：
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styles.css';
document.head.appendChild(link);
预加载 CSS 并延迟应用
利用 rel="preload" 提前加载资源，等需要时再切换为样式表，实现预加载 + 异步应用。
立即学习“前端免费学习笔记（深入）”；
- 用
<link rel="preload">告诉浏览器提前获取 CSS 文件 - 此时不解析也不应用样式
- 通过 JS 监听加载完成，再创建真正的
link[rel=stylesheet]来激活
示例代码：
<link rel="preload" href="async-style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
或手动控制：
const preloadLink = document.createElement('link');
preloadLink.rel = 'preload';
preloadLink.as = 'style';
preloadLink.href = 'async-style.css';
preloadLink.onload = () => {
const styleLink = document.createElement('link');
styleLink.rel = 'stylesheet';
styleLink.href = 'async-style.css';
document.head.appendChild(styleLink);
};
document.head.appendChild(preloadLink);
使用 media 属性延迟非关键 CSS
将非关键 CSS 的 media 设置为一个默认不匹配的条件，使其异步加载。
例如：
<link rel="stylesheet" href="print.css" media="print"> <link rel="stylesheet" href="non-critical.css" media="not all" onload="this.media='all'">
页面加载后通过 JS 将 media 改为 all，触发样式应用。这样初始渲染不受影响。
结合 load 事件优化用户体验
为了避免样式突然变化（FOUC），可以在 CSS 加载完成后再显示相关内容。
- 给 body 或容器加一个
loading-styles类 - 在 CSS 加载完成后移除该类，启用样式
- 可配合骨架屏或过渡动画提升体验
示例：
link.onload = () => {
document.body.classList.remove('loading-styles');
};
基本上就这些方法。核心思路是：不让 CSS 阻塞 HTML 解析，通过 JS 控制加载时机和应用时机，尤其适用于非首屏、主题、第三方组件等非关键样式。注意权衡异步带来的 FOUC 风险，合理使用 media、preload 和动态注入策略。不复杂但容易忽略细节。
