使用 preload+onload 是推荐的异步加载 CSS 方案，通过 rel=”preload” 高优先级下载不阻塞渲染，在 onload 时改为 rel=”stylesheet” 启用样式，结合动态创建 link 可实现非阻塞且可控的加载时机，避免页面闪动。
通过 link 标签异步加载 CSS，核心思路是避免阻塞页面渲染的同时，确保样式最终生效。标准的 link 标签会阻塞渲染直到 CSS 下载完成，而异步加载可以通过一些技巧绕过这种阻塞行为。
使用 preload + onload 动态切换 rel
preload 是一种告诉浏览器提前下载资源但不立即应用的方式。结合 JavaScript 可以在下载完成后将其转换为可应用的样式表。
示例代码：
// 防止 preload 资源未及时处理 function loadCSS(href) { var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href; document.head.appendChild(link); } // 可用于补漏或动态加载
说明：rel=”preload” as=”style” 让浏览器高优先级下载 CSS 文件，但不阻塞渲染。 onload 触发时将 rel 从 preload 改为 stylesheet，正式启用样式。 添加 this.onload=null 防止事件重复触发。
动态创建 link 标签插入 head
完全通过 JavaScript 创建 link 标签，实现异步非阻塞加载。
示例代码：
function loadCSS(href) { var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href; document.head.appendChild(link);}// 页面加载后调用loadCSS('styles.css');
优点：完全异步，不阻塞解析和渲染。 可控制加载时机（如滚动后、交互后）。
使用 media 属性延迟加载非关键 CSS
将非关键 CSS 设置为只在特定媒体条件下加载，比如 print 或自定义无效 media，使其低优先级。
示例：
Ai Mailer
使用Ai Mailer轻松制作电子邮件
49 查看详情 
立即学习“前端免费学习笔记（深入）”；
原理：初始 media=”print” 浏览器不会立即应用。 onload 后改为 media=”all” 正式启用。 适合非首屏必须的样式。
基本上就这些方法。推荐使用 preload + onload 方案，兼容性较好且能利用浏览器预加载机制。关键是不让 CSS 阻塞首次渲染，又能尽快应用样式，避免页面闪动。不复杂但容易忽略细节，比如事件去重和错误处理。
以上就是如何通过link标签异步加载css的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1015294.html
微信扫一扫 
支付宝扫一扫 
