如何用css异步加载第三方样式库-css教程-PHP中文网

如何用css异步加载第三方样式库

P粉602998670

发布： 2025-09-24 10:06:01

原创

308人浏览过

异步加载第三方样式库可提升页面初始加载速度。1. 使用JavaScript动态插入link标签，实现非阻塞加载，但可能出现FOUC；2. 利用preload预加载并 onload后切换rel为stylesheet，提前下载且不立即应用；3. 设置media为无效值延迟应用，再通过JS激活；4. 注意关键样式同步加载，非关键资源异步，结合缓存优化体验。

如何用css异步加载第三方样式库

异步加载第三方样式库可以提升页面初始加载速度，避免阻塞渲染。虽然 CSS 默认是阻塞渲染的资源，但可以通过一些技巧实现“异步”加载的效果。

1. 使用 JavaScript 动态插入 link 标签

通过 JS 创建 link 元素并添加到 head 中，可以让浏览器在 DOM 构建完成后才发起 CSS 请求，从而实现非阻塞加载。

不会阻塞页面解析（HTML 可继续解析）
样式加载完成前可能出现 FOUC（内容闪现）

示例代码：

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

// 异步加载 Bootstrap CDN
loadCSS('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css');

登录后复制

2. 使用 preload + onload 切换 rel

利用 rel="preload" 声明预加载资源，等加载完成后再切换为 rel="stylesheet"，实现异步且可控的加载方式。

立即学习“前端免费学习笔记（深入）”；

库宝AI

库宝AI是一款功能多样的智能伙伴助手，涵盖AI写作辅助、智能设计、图像生成、智能对话等多个方面。

109

查看详情

这种方式能提前开始下载，又不立即应用样式。

function preloadCSS(href) {
  const link = document.createElement('link');
  link.rel = 'preload';
  link.as = 'style';
  link.href = href;
  link.onload = () => {
    link.rel = 'stylesheet'; // 加载完成后激活
  };
  document.head.appendChild(link);
}

preloadCSS('https://cdn.example.com/library.css');

登录后复制

3. 添加 media 属性延迟应用

设置一个无效的 media 查询，让浏览器异步下载而不阻塞渲染，再通过 JS 修改为 all 激活样式。

const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cdn.example.com/theme.css';
link.media = 'print'; // 初始不生效
document.head.appendChild(link);

// 稍后激活（例如页面加载后）
window.onload = () => {
  link.media = 'all';
};

登录后复制