页面优化之CSS异步加载

通常来说，我们都是在 header 中直接写上我们需要的css，比如：

<link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet" media="all">

这样存在的一个问题就是多个css会串行加载，而作为开发人员我们希望只加载了主要css之后就可以开始渲染页面，不关键的css留着慢慢加载。

如何优化？

比方说下面例子：（styles.css里是非关键CSS代码）

<link rel="preload" href="styles.css" as="style" onload="this.οnlοad=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

主要原理如下：

• link rel="preload" as="style"异步请求样式表（详情可见 Preload critical assets guide）
• onload属性允许CSS在加载完成之后执行一些处理，在这里执行null转化，可以避免在切换rel属性时重复处理
• noscript元素对不支持javascript的浏览器做兼容。

在实际生产环境中，你可以通过 loadCSS 函数来很好地进行优化