prefetch和preload的对比

两者相同点

浏览器请求资源，不执行

两者的区别

preload强制浏览器获取当前需要的资源，优先级高， prefetch获取将来需要的资源， 把决定权留给浏览器， 所以一般浏览器会在闲置的时候下载， 优先级最低。总结就是preload一定会及时下载资源， prefetch最后都不一定去下载。

prefech 和 preload 兼容性

一般prefetch和preload可以这样使用

举例当前在a页面，a页面可以去到b页面

<link rel="prefetch" href="b.js">
<link rel="preload" href="a.js">

但是根据 https://caniuse.com/#search=prefetch和https://caniuse.com/#search=preload
safari 和 ios-safari从来都不支持

但是可以使用image标签预加载静态资源

<script type="text/javascript">
var my_image = new Image();
my_image.src = 'b.js';
</script>

这是一个针对ios的兼容方案，不推荐在android端使用, 个人认为原因主要有两点， 第一点是这种方案需要下载js并执行，js执行会阻碍渲染， 第二点是不可以控制优先级，前面说了preload优先级较高， prefetch优先级较低，这种方式在中间。 既不可以达到preload在当前页面优先加载的急迫又不可以达到未来需要空闲时下载的悠闲，在android中很鸡肋。

可以预加载的资源

预加载的资源除了js文件之外，还可以是css，image等， 尤其是iconfont等确定要加载的全局资源，在dom，css构建完之后才下载，可以通过预加载提前完成

其他类似的标签

preconnect, prerender