异步加载CSS的方式有哪些？
异步加载 CSS 的方式主要有以下几种，它们的目的都是为了防止 CSS 阻塞渲染，提升页面加载性能：
1. 使用 <link> 标签的 media 属性:
这是最简单的一种异步加载方式。通过设置一个不匹配的媒体查询，浏览器会认为这个 CSS 文件不重要，从而异步加载。页面加载完成后，再动态修改 media 属性为匹配的查询，使 CSS 生效。
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
- 优点: 简单易用，兼容性好。
- 缺点: 会下载 CSS 文件，但样式应用会延迟到
onload事件触发，导致页面闪烁 (FOUC - Flash of Unstyled Content)。
2. 使用 <link> 标签的 rel="preload" 和 onload 事件:
这种方式利用 preload 预加载 CSS 文件，并在加载完成后通过 JavaScript 将其添加到页面。
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>
- 优点: 预加载可以提高加载优先级，减少 FOUC。
noscript标签保证了在 JavaScript 禁用的情况下 CSS 仍然可以加载。 - 缺点: 稍微复杂一些，需要 JavaScript 代码。
3. 使用 JavaScript 动态插入 <link> 标签:
这种方式完全通过 JavaScript 控制 CSS 的加载。
var link = document.createElement('link');
link.href = 'style.css';
link.rel = 'stylesheet';
document.head.appendChild(link);
- 优点: 灵活控制加载时机。
- 缺点: 需要 JavaScript 代码，如果执行时机不当，可能会阻塞渲染。
4. 使用 @import 规则 (不推荐):
@import 规则可以导入外部 CSS 文件。然而，它会阻塞页面渲染，因此不推荐使用。
@import url("style.css");
- 缺点: 阻塞渲染，性能差。
5. 使用 Web Workers (较少使用):
Web Workers 可以在后台线程加载 CSS，避免阻塞主线程。但是，由于 Web Workers 无法直接操作 DOM，因此需要通过postMessage与主线程通信，实现起来比较复杂，实际应用较少。
最佳实践建议:
- 对于非关键 CSS，推荐使用
rel="preload"和onload的组合方式，以获得最佳性能和兼容性。 - 对于关键 CSS，为了避免 FOUC，最好内联到
<head>中，或者使用 critical CSS 的技术，将首屏渲染所需的 CSS 内联，其余部分异步加载。
选择哪种方法取决于你的具体需求和项目情况。 优先考虑 media 和 preload 方法，它们相对简单且有效。 避免使用 @import。 Web Workers 适用于复杂场景，但需要谨慎使用。 最终目标是尽可能减少 CSS 对渲染的阻塞，提高用户体验。
浙公网安备 33010602011771号