前言：先说个废话

啊这... 先说啊， 咱们写网页啊，最怕的就是 CSS 把页面卡住。要是等 CSS 下载完才渲染，那用户看到的就是白屏，简直跟坐等火星人来访一样缓慢。

所以啊， 今天给较大家扯一扯怎么把 link 标签玩儿成异步的， 操作一波。 别管它到底是啥原理了反正能跑就行。

一、 最常见的几种写法

1）采用 rel="preload" + onload

这玩意儿是官方推荐的，但我们不管官方，只管能跑。

• rel=preload 让浏览器抢着下载，不阻塞。
• onload 那句把 rel 改成 stylesheet，样式正式生效。
• 加个 noscript 避免 JS 被禁用时没样式。

2）media="print" + onload 改成 all

当前这个技巧跟上面差不更多， 就是先把 media 设置成根本不匹配的值，让它等会儿再打开，说起来...。

3）纯 JS 动态创建 link

下面这段代码直接在脚本里塞 link，谁看谁尴尬。

var l=document.createElement;
l.rel='stylesheet';
l.href='async.css';
l.media='print';
l.onload=function{ this.media='all'; };
document.head.appendChild;

二、 为哪些要“异步”加载 CSS

• 彻底异步，不阻塞解析和渲染。页面马上能看到点东西。
• 可控制加载时机。比如先把首屏关键 CSS 再把其它的缓慢缓慢来。
• 省流量？不一定，但感觉良好像省了点哪些。
• SEO 良好像也会稍微加点分，这是因为页面更迅速啦。

三、 实际操作步骤

Step 1：准备关键 CSS 与非关键 CSS 文件

先把首页必须要要的样式弄到一个叫 main.css 的 火候不够。 文件里其他的不十分沉关键就丢到 extra.css 里。

Step 2：在 head 里写关键 CSS 正常加载

Step 3：把非关键 CSS 用 preload+onload 异步化

Step 4：如果你想更 “炫酷”， 再加个 media=print 的后备方案

四、坑 & 注意事项

• 不要遗忘加 =null 避免反复触发： 在 onload 后面加一句 this.onload=null；否则有时候会循环调用。
• 兼容性： 老 IE 根本不认 preload， 要么回退到普通 link，要么干脆别管它。
• CORS： 如果 CSS 放在别域名， 需要服务器加 Access-Control-Allow-Origin，否则 preload 会报错。
• 顺序很十分沉关键： 把关键 CSS 放前面 非关键放后面否则有可能出现“闪白”。
• #bug： 有些浏览器对 media=print 的处理有 bug， 会直接当作 all 加载，这时候就失效了。只能靠测试找出哪款浏览器有问题，然后单独写 。

五、完整示例代码

    
    
    
// 随便写点占位符

// 故意拼错
   
😀😂😅😆😇, 页面已经启动渲染啦！
   // 再来段 js 动态插入
       var l=document.createElement;
       l.rel='stylesheet';
       l.href='/css/dynamic.css';
       l.media='print';
       l.onload=function{ this.media='all'; this.onload=null };
       document.head.appendChild;
   

六、 完成语

良好啦，这篇文章总体来说把全部 “怎么用 link 实现 css 异步加载” 的思路都砸出来了。其实真实的也没那么不容简单， 就是记住别忘了给 onload 加个 =null，避免无限循环；还有别忘了兼容老浏览器，要不然用户看不到样式直接崩溃。

If you think this is too messy – well that's point! 真实正想让搜索引擎抓住关键词， 这事儿我得说道说道。 只要标题里出现 “CSS 异步加载”“link 标签”“非阻塞”等词，就算排排队也能上去。祝较大家玩得开心，别被卡住白屏！✌️🚀