如何通过link标签异步加载css-css教程-PHP中文网

如何通过link标签异步加载css

P粉602998670

发布： 2025-10-13 09:49:01

原创

247人浏览过

使用 preload+onload 是推荐的异步加载 CSS 方案，通过 rel="preload" 高优先级下载不阻塞渲染，在 onload 时改为 rel="stylesheet" 启用样式，结合动态创建 link 可实现非阻塞且可控的加载时机，避免页面闪动。

如何通过link标签异步加载css

通过 link 标签异步加载 CSS，核心思路是避免阻塞页面渲染的同时，确保样式最终生效。标准的 link 标签会阻塞渲染直到 CSS 下载完成，而异步加载可以通过一些技巧绕过这种阻塞行为。

使用 preload + onload 动态切换 rel

preload 是一种告诉浏览器提前下载资源但不立即应用的方式。结合 JavaScript 可以在下载完成后将其转换为可应用的样式表。

示例代码：

<link 
  rel="preload" 
  href="styles.css" 
  as="style" 
  onload="this.onload=null;this.rel='stylesheet'">
<script>
  // 防止 preload 资源未及时处理
  function loadCSS(href) {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = href;
    document.head.appendChild(link);
  }
  // 可用于补漏或动态加载
</script>

登录后复制

说明：

rel="preload" as="style" 让浏览器高优先级下载 CSS 文件，但不阻塞渲染。
onload 触发时将 rel 从 preload 改为 stylesheet，正式启用样式。
添加 this.onload=null 防止事件重复触发。

动态创建 link 标签插入 head

完全通过 JavaScript 创建 link 标签，实现异步非阻塞加载。

示例代码：

<script>
function loadCSS(href) {
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = href;
  document.head.appendChild(link);
}
// 页面加载后调用
loadCSS('styles.css');
</script>

登录后复制

优点：

完全异步，不阻塞解析和渲染。
可控制加载时机（如滚动后、交互后）。

使用 media 属性延迟加载非关键 CSS

将非关键 CSS 设置为只在特定媒体条件下加载，比如 print 或自定义无效 media，使其低优先级。

示例：

标小兔AI写标书

一款专业的标书AI代写平台，提供专业AI标书代写服务，安全、稳定、速度快，可满足各类招投标需求，标小兔，写标书，快如兔。

查看详情

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

<link 
  rel="stylesheet" 
  href="print.css" 
  media="print" 
  onload="if(media!='all')media='all'">

登录后复制

原理：

初始 media="print" 浏览器不会立即应用。
onload 后改为 media="all" 正式启用。
适合非首屏必须的样式。

基本上就这些方法。推荐使用 preload + onload 方案，兼容性较好且能利用浏览器预加载机制。关键是不让 CSS 阻塞首次渲染，又能尽快应用样式，避免页面闪动。不复杂但容易忽略细节，比如事件去重和错误处理。

以上就是如何通过link标签异步加载 css的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css边框颜色border-color设置技巧 CSS动画元素的初始状态如何设置_keyframes from与to技巧 CSS定位元素在不同浏览器中的表现一致吗_兼容性分析与优化 CSS框架Bulma的Flexbox布局如何使用_弹性盒子实践在css中link标签跨域样式引入问题