美文网首页
prefetch和preload的对比

prefetch和preload的对比

作者: 宅神sean | 来源:发表于2017-12-20 11:12 被阅读0次

两者相同点


浏览器请求资源,不执行

两者的区别


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=prefetchhttps://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

相关文章

  • prefetch新能优化及quicklink应用

    prefetch 与 preload webpack优化之preload和prefetch里面介绍了preload...

  • webpack 懒加载篇

    prefetch 和 preload 1,prefetch 是父 chunk 加载完成后,再加载。preload ...

  • prefetch和preload的对比

    两者相同点 浏览器请求资源,不执行 两者的区别 preload强制浏览器获取当前需要的资源,优先级高, prefe...

  • web性能优化

    Preload,Prefetch的使用

  • preload和prefetch

    参考资料: MDN preload preload 有什么好处 Preload, Prefetch And Pri...

  • Prefetch,Preload

    默认设置是async 1 .一般我们都是将splitChunks.chunks字段打包成all,可以同时对同步和异...

  • prefetch、preload 区别

    转载: 浏览器页面资源加载过程与优化 用 preload 预加载页面资源 纠正 上图来自第一篇文章,图中圈起来的部...

  • preload_prefetch

    浏览器资源优先级 不同的资源在浏览器渲染的不同阶段进行加载的优先级不同, 一共分成五个级别Highest 最高Hi...

  • preconnect & prefetch & preload

    背景 一个web page通常由两部分组成: HTML document optional resource(cs...

  • webpack中的preload和prefetch

    官方解释: prefetch(预获取):将来某些导航下可能需要的资源preload(预加载):当前导航下可能需要资...

网友评论

      本文标题:prefetch和preload的对比

      本文链接:https://www.haomeiwen.com/subject/lwxgwxtx.html