异步加载CSS

<link rel="preload"> 

浏览器会高优先下载资源并缓存，进行执行，如果link标签中的as属性是stylesheet（as='stylesheet'），那么html在parse的时候会了解到这是一个CSS资源。

，由于加了predload指令，这个css的加载不会引起 render blocking

但是relpreload的兼容性并不好，所以实际在异步加载css时我们不推荐使用这种方法，

 

异步加载css我们使用这种方法：

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

 

media print表示，"在打印时应用这个css"，那么这个css其实就会异步的去下载，并应用，不会引起 render blocking

onload="this.media='all'" 表示页面资源加载完成(window.onload)后将media属性设置为all，

media属性设置为all就相当于..link中没有设置media这个属性..相当于普通的link标签，

此时会去应用css

 

<link rel="prefetch"> 

浏览器会低优先级的下载资源并进行缓存，但并不会应用他们

 

 

资料：

https://3perf.com/blog/link-rels/

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css/

https://github.com/filamentgroup/loadCSS/blob/master/README.md

https://www.filamentgroup.com/lab/load-css-simpler/

https://stackoverflow.com/questions/36641137/how-exactly-does-link-rel-preload-work