使用rel="preload"可实现CSS异步加载，1. 通过<link rel="preload" as="style">预加载资源；2. 利用JavaScript动态插入link标签应用样式；3. 结合内联关键CSS与异步加载非关键CSS，提升页面渲染性能。
异步加载_通过rel=\"preload\"或rel=\"stylesheet\"控制加载">
在网页开发中，CSS 文件的加载方式会直接影响页面渲染性能。通过 <link> 标签结合不同的 rel 属性，可以实现对 CSS 资源的异步加载控制。关键在于使用 rel="preload" 预加载资源，或使用 rel="stylesheet" 配合其他属性实现非阻塞加载。
使用 rel="preload" 预加载 CSS 文件
rel="preload" 告诉浏览器提前下载指定资源，但不会立即应用。这对关键 CSS 的预加载非常有用，可提升渲染速度。
<link rel="preload" href="style.css" as="style">
-
as="style"明确告知浏览器资源类型是样式表，确保正确优先级和解析行为 - 该标签只负责下载，不会将 CSS 应用到页面
- 需配合后续操作（如动态插入）来激活样式
实现真正的异步加载：preload + onload 动态插入
仅使用 preload 不足以异步应用样式。需要通过 JavaScript 在适当时候将其转为生效的样式表。
常见做法是预加载后，创建新的 <link rel="stylesheet"> 插入文档：
立即学习“前端免费学习笔记（深入）”；
<link rel="preload" href="async-style.css" as="style" onload="this.onload=null;handleLoad(this)">
<script>
function handleLoad(link) {
const style = document.createElement('link');
style.rel = 'stylesheet';
style.href = link.href;
document.head.appendChild(style);
}
</script>
- 预加载阶段不阻塞渲染
- onload 触发后才正式启用样式，实现异步效果
- 适合非首屏、主题或延迟加载的样式
直接使用 rel="stylesheet" 的异步优化技巧
传统 rel="stylesheet" 会阻塞渲染。但可通过一些方法减轻影响：
- 将
<link rel="stylesheet">放在<body>底部，减少首屏阻塞时间 - 配合
media属性设置非关键条件，如media="print"，使浏览器低优先级加载：
<link rel="stylesheet" href="print.css" media="print">
页面加载后再切换为media="all"可避免阻塞
推荐实践：关键 CSS 内联 + 异步加载其余样式
最佳性能策略是：
- 将首屏必需的 CSS 内联到
<head>中，保证快速渲染 - 其余 CSS 使用
rel="preload"预加载，并通过脚本异步注入 - 利用
onload或DOMContentLoaded控制加载时机
基本上就这些。合理使用 rel="preload" 和动态插入，能有效实现 CSS 异步加载，既提升性能又保持样式可控。
