异步加载css 及 rel preload prefetch 区别

Posted eret9616

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了异步加载css 及 rel preload prefetch 区别相关的知识,希望对你有一定的参考价值。

<link rel="preload"> 

浏览器会优先下载资源并缓存,进行执行,如果是CSS(as=\'stylesheet\'),那么下载完后不会立刻阻塞住(阻塞住将csstree和domtree生成渲染tree),而是会异步的去加载这些css

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

 

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

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

 

media print表示,"在打印时应用这个css",那么这个css其实就会异步的去下载,并应用,不会阻塞住去应用(阻塞住应用csstree和domtree生成渲染tree)。

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

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

此时会去应用css

 

<link rel="prefetch"> 

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

 

 

 

 

资料:

[1] https://3perf.com/blog/link-rels/

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

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

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

以上是关于异步加载css 及 rel preload prefetch 区别的主要内容,如果未能解决你的问题,请参考以下文章

jqGrid 使用案例及笔记

妹子UI-yepnope.js使用详解及示例分享(异步加载数据)

移动端日期及选择插件mobiscroll

如何异步加载 CSS - WordPress

动态加载 CSS

Cocos2d-Js基础教学资源打包工具的使用及资源的异步加载处理