如何通过JavaScript实现CSS文件的异步引入？-css教程-PHP中文网

动态插入link元素是最可靠、兼容性好且不阻塞渲染的css异步引入方式，核心在于绕过预加载器扫描，通过设置media="print"延迟下载，再切换为"all"激活，并配超时兜底确保样式生效。

如何通过javascript实现css文件的异步引入？

link 元素动态插入是目前最可靠、兼容性最好、且不阻塞渲染的 CSS 异步引入方式。它不依赖构建工具或现代 API，所有主流浏览器都支持。

为什么不能直接用 `link[rel="stylesheet"]` 写在 HTML 里？

因为默认的 <link rel="stylesheet" href="style.css"> 是渲染阻塞资源：浏览器会暂停 HTML 解析和页面绘制，直到该 CSS 下载并构建完 CSSOM。这对非关键样式（比如主题切换、打印样式、暗色模式后备）非常不友好。

用 `document.createElement("link")` 动态插入的核心要点

关键不是“创建”，而是**绕过预加载器的提前扫描**——浏览器只对 HTML 中静态出现的 link 做预加载，JS 动态创建的不会被提前抓取，自然不阻塞初始渲染。

rel 必须设为 "stylesheet"，否则无效
href 必须是完整路径或相对路径（建议用绝对路径，避免 base 标签干扰）
插入位置必须是 document.head，插到 body 末尾可能被忽略
不要设 media="all" ——它会让浏览器立刻下载；可先设 media="print" 或 media="only x" 延迟应用，等加载完成再切回 "all"（部分老方案用这招防 FOUC）

`onload` 和 `onerror` 的实际处理逻辑

这两个事件不是所有浏览器都稳定触发（尤其旧版 Safari 对 link.onload 支持弱），所以不能只靠它们判断“样式已就绪”。更稳妥的做法是：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

监听 link.onload 作为主要信号，成功后立即将 media 改为 "all" 激活样式
同时设置超时兜底（如 5s），防止某些网络环境或 CORS 问题导致事件永不触发
onerror 触发时，建议记录错误但不要中断主流程 —— 大多数非关键 CSS 加载失败不影响功能

示例片段：

const loadCSS = (url) => {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = url;
  link.media = 'print'; // 防止立即下载
  document.head.appendChild(link);

  const cleanup = () => {
    link.media = 'all'; // 激活
  };

  link.onload = cleanup;
  link.onerror = () => {
    console.warn(`CSS load failed: ${url}`);
    cleanup(); // 即使失败也尝试激活，避免样式残留 print 状态
  };

  setTimeout(cleanup, 5000); // 超时保底
};