答案是使用JavaScript动态加载、media属性延迟、预加载插入可异步加载CSS。通过动态创建link标签、设置非匹配media类型后切换、或preload预加载再转为stylesheet，可避免阻塞渲染，提升首屏速度，适用于非关键CSS，关键样式仍应同步加载。
在HTML中异步加载多个CSS文件，是为了避免阻塞页面渲染，提升首屏加载速度。虽然CSS默认是渲染阻塞资源，但可以通过一些技巧实现“异步”加载，即先加载而不立即应用，或动态插入。
1. 使用JavaScript动态创建link标签
这是最常用的方法：通过JavaScript创建<link>标签并设置rel="stylesheet"，延迟插入到页面中，从而实现异步加载。
示例：同时加载多个CSS文件
<script>
function loadCSS(href) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
document.head.appendChild(link);
}
// 异步加载多个CSS
loadCSS('/css/style1.css');
loadCSS('/css/style2.css');
loadCSS('/css/style3.css');
</script>
这种方式不会阻塞DOM解析，CSS会在后台加载，加载完成后自动应用。
立即学习“前端免费学习笔记（深入）”；
2. 利用media属性延迟非关键CSS
将非关键CSS的media设为一个不匹配当前环境的值（如print），然后切换为all，触发加载。
<link rel="stylesheet" href="/css/async-style.css" media="print" onload="this.media='all'">
也可以配合JavaScript批量处理：
<script>
['/css/a.css', '/css/b.css'].forEach(function(href) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
link.media = 'print';
link.onload = function() { this.media = 'all'; };
document.head.appendChild(link);
});
</script>
3. 预加载 + 动态插入（推荐）
使用rel="preload"提前下载CSS，但不应用，等需要时再插入。
<link rel="preload" href="/css/theme.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <link rel="preload" href="/css/layout.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
或者用JavaScript控制：
function preloadCSS(href) {
var link = document.createElement('link');
link.rel = 'preload';
link.as = 'style';
link.href = href;
link.onload = function() {
var sheet = document.createElement('link');
sheet.rel = 'stylesheet';
sheet.href = href;
document.head.appendChild(sheet);
};
document.head.appendChild(link);
}
preloadCSS('/css/one.css');
preloadCSS('/css/two.css');
基本上就这些方法。关键是不让CSS一开始就阻塞渲染，而是通过脚本控制加载时机。适合用于主题、组件库、非首屏样式等场景。注意：关键CSS仍建议内联或同步加载以保证视觉一致性。
