在html中如何异步加载多个css文件-css教程-PHP中文网

在html中如何异步加载多个css文件

P粉602998670

发布： 2025-10-01 13:17:02

原创

848人浏览过

答案是使用JavaScript动态加载、media属性延迟、预加载插入可异步加载CSS。通过动态创建link标签、设置非匹配media类型后切换、或preload预加载再转为stylesheet，可避免阻塞渲染，提升首屏速度，适用于非关键CSS，关键样式仍应同步加载。

在html中如何异步加载多个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，触发加载。

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

查看详情

<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仍建议内联或同步加载以保证视觉一致性。

以上就是在html中如何异步加载多个css文件的详细内容，更多请关注php中文网其它相关文章！