[css] 异步加载CSS的方式有哪些？
异步加载CSS
说到加载 CSS 这种事儿不是很简单吗？像这样咯：
这样是没错！但是这样有问题啊——会阻塞渲染！浏览器看到这个标签就会停下手里的活儿，去加载 CSS 并解析了。
当然了，如果这个 CSS 文件是接下来要渲染的内容所需的，那无可厚非，必须先要有了这个 CSS 才能接着渲染，阻塞也是情理之中。
但实际的情况却是，我们很多 CSS 内容其实在首屏的时候是不需要，起码等到后续才会使用，那么这个时候这些 CSS 这样加载去阻塞内容渲染就不对了。
也就是说，针对优先级不那么高的（暂时用不到）CSS，就应该要想办法让它异步加载，不要阻塞浏览器渲染。
那么怎么弄呢？
老方子
现在介绍第一种老办法：通过 JS 动态插入 link 标签来异步载入 CSS 代码，就像这样：
var myCSS = document.createElement( “link” );
myCSS.rel = “stylesheet”;
myCSS.href = “mystyles.css”;
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );
这个很好理解吧，就是后续 JS 执行的时候，去创建一个 link 标签来加载 CSS 代码。
还有一个办法呢就是利用 link 上的 media 属性，将它设置为和用户当前浏览器环境不匹配的值，比如：media=“print”，甚至可以设置为一个完全无效的值 media=“jscourse” 之类的。
这样一来，浏览器就会认为这个 CSS 文件优先级非常低，就会在不阻塞的情况下进行加载。但是为了让 CSS 规则生效，最后还是要将 media 值改对才行。所以，这个办法落实到代码就是这样：
介绍完了老方子，我们再来看看新药方。
新的异步加载方式
新方子就是利用规范中新增加的 rel=“preload” ，就像这样：
你是不是想问：这和老方子也没多大区别嘛！
看上去确实如此，但是呢，语义上更加好一些。另外就是你仔细点就会发现 as="style"这个属性，所以 preload 不仅仅可以用在 CSS 文件上，而是可以用在绝大多数的资源文件上。比如：JS 文件
然后要用的时候，就创建一个 script 标签指向它：var script = document.createElement(“script”);
script.src = “scriptfile.js”;
document.body.appendChild(script);
这个时候浏览器就直接从缓存中拿这个文件了，不会再发请求了，因为此前已经加载好了。
那么 preload 中的 as 属性支持哪些资源文件呢？下面这些都可以：
audio
document
embed
fetch
font
image
object
script
style
track
worker
video
是不是迫不及待想去试试了？告诉你个坏消息，目前 preload 只有 Chrome 是完美支持的，其他浏览器惨不忍睹，哎！
个人简介
我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论
主目录
与歌谣一起通关前端面试题
