今天在开发翰络云工具的时候，突发奇想，想让所有文本都用阿里数黑体，但又不想让页面加载速度太慢，于是搜集了一下大佬们的解决方案，写个博客，记录一下。

问题分析

页面加载完成的时间经常取决于静态资源加载完成的时间。前端程序员经常会通过压缩前端静态资源的加载资源以及调整资源加载顺序的办法提高页面访问速度，例如gzip压缩，缓存，图片懒加载等手段。

今天需要解决的一个问题是让次要的css资源异步进行加载，避免因非必要资源的加载阻塞页面渲染。通常适用于体积较大的非必要字体、图标等加载。

解决方案

解决方案1：利用媒体查询

在媒体查询属性中设置一个当前浏览器不支持的值，后指定其渲染时机：

<link rel="stylesheet" href="./later.css" media="none" onload="this.media='all'">

这样浏览器将会异步加载这个CSS文件，在加载完毕之后，使用onload属性将link的媒体类型设置为all，让浏览器开始渲染。

原理是与当前媒体类型不匹配的数据加载优先级偏低

解决方案2：利用link预加载

<link>标签可以通过将rel属性设置为preload实现预加载

<link rel="preload" href="./later.css" as="style" onload="this.rel='stylesheet'">

与上一个办法思路相同，在加载完后再修改当前的rel属性为stylesheet，使其能够被识别为叠层样式表

不过这个方法的浏览器兼容性相对较差一点

解决方案3：曲线救国

let link = document.createElement("link");
link.rel = "stylesheet";
link.href = "./later.css";

document.head.appendChild(link);

直接让放在页脚的js脚本给你加载，由于html是一般是顺着代码顺序加载的，当加载到页脚的时候页面基本框架已经加载完成了，这时候再让js进行加载可以认为是达成了异步加载的目的。