如何在CSS中实现异步加载样式表_通过JavaScript动态创建标签

通过JavaScript动态创建link标签可实现CSS异步加载，避免阻塞渲染。1. 创建link元素并设置rel和href属性，插入head中实现非阻塞加载；2. 可监听onload和onerror事件处理加载完成或失败；3. 通过查询已存在link防止重复加载；4. 可设置media属性控制应用条件，支持延迟激活样式。该方法灵活高效，是前端性能优化常用策略。

标签">

在Web开发中，为了提升页面加载性能，经常需要异步加载CSS资源。直接在HTML中使用 link[rel="stylesheet"] 会阻塞渲染，而通过JavaScript动态创建 标签可以实现非阻塞的异步加载。以下是具体实现方法。

动态创建 link 标签实现异步加载

通过 JavaScript 创建一个 元素，并设置其 rel 属性为 "stylesheet"，href 指向目标CSS文件路径，再将其插入到 中。这种方式不会阻塞页面初始渲染，因为浏览器不会提前预加载该资源。

示例代码：

const loadCSS = (url) => {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = url;
  document.head.appendChild(link);
};

// 调用函数加载样式表
loadCSS('/path/to/styles.css');

添加 onload 回调处理加载完成

某些场景下，你可能需要在样式表加载完成后执行一些操作（比如显示内容、触发动画）。可以通过监听 load 事件来实现。

改进版示例：

const loadCSSWithCallback = (url, callback) => {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = url;

  if (callback) {
    link.onload = () => {
      callback(null, link);
    };
    link.onerror = () => {
      callback(new Error(`Failed to load CSS: ${url}`));
    };
  }

  document.head.appendChild(link);
};

// 使用示例
loadCSSWithCallback('/path/to/theme.css', (err, link) => {
  if (err) {
    console.error(err);
  } else {
    console.log('样式表已成功加载:', link.href);
  }
});

避免重复加载相同样式表

如果多次调用加载函数，可能会导致同一CSS被重复插入。可以在插入前检查是否已存在相同 href 的 link 标签。

优化逻辑：

const loadCSSOnce = (url, callback) => {
  // 检查是否已加载
  const existingLink = document.querySelector(`link[href="${url}"]`);
  if (existingLink) {
    if (callback) callback(null, existingLink);
    return;
  }

  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = url;

  link.onload = () => callback && callback(null, link);
  link.onerror = () => callback && callback(new Error(`Load failed: ${url}`));

  document.head.appendChild(link);
};

可选：设置媒体类型或延迟加载

你还可以通过设置 media 属性控制样式表的应用条件（如 print、screen 等），实现更精细的控制。例如只在特定条件下激活样式：

link.media = 'print'; // 只用于打印时加载
// 或者先设为无效值，稍后切换
link.media = 'not all'; // 初始不生效
// 加载后再改为：
link.media = 'all';

这种“先加载但不应用”的技巧可用于关键CSS优先策略中。

基本上就这些。通过 JavaScript 动态插入 标签，既能实现异步加载，又能灵活控制加载时机和行为，是现代前端优化中的常用手段。