prefetch 和preload_preload和prefetch

1、 preload和prefetch的出现为我们提供了可以更加细粒度地控制浏览器加载资源的方法

2、 preload：

link标签的preload是一种声明式的资源获取请求方式，用于提前加载一些需要的依赖，并且不会影响页面的onload事件；使用方式如下：

// css加载后立即生效

其中，rel属性值为preload；as属性用于规定资源的类型，并根据资源类型设置Accep请求头，以便能够使用正常的策略去请求对应的资源；href为资源请求地址；onload和onerror则分别是资源加载成功和失败后的回调函数；

其中as的值可以取style、script、image、font、fetch、document、audio、video等；如果as属性被省略，那么该请求将会当做异步请求处理；

另外，在请求跨域资源时推荐加上crossorigin属性，否则可能会导致资源的二次加载(尤其是font资源)；

preload特点：

preload加载的资源是在浏览器渲染机制之前进行处理的，并且不会阻塞onload事件；

preload可以支持加载多种类型的资源，并且可以加载跨域资源；

preload加载的js脚本其加载和执行的过程是分离的。即preload会预加载相应的脚本代码，待到需要时自行调用；

3、prefetch：

prefetch是一种利用浏览器的空闲时间加载页面将来可能用到的资源的一种机制；通常可以用于加载非首页的其他页面所需要的资源，以便加快后续页面的首屏速度；

prefetch特点

prefetch加载的资源可以获取非当前页面所需要的资源，并且将其放入缓存至少5分钟(无论资源是否可以缓存)；并且，当页面跳转时，未完成的prefetch请求不会被中断；

4、对比：

缓存：

Chrome有四种缓存：http cache、memory cache、Service Worker cache和Push cache。在preload或prefetch的资源加载时，两者均存储在http cache。当资源加载完成后，如果资源是可以被缓存的，那么其被存储在http cache中等待后续使用；如果资源不可被缓存，那么其在被使用前均存储在memory cache；

preload和prefetch都没有同域名的限制；

preload主要用于预加载当前页面需要的资源；而prefetch主要用于加载将来页面可能需要的资源；

不论资源是否可以缓存，prefecth会存储在net-stack cache中至少5分钟；

p reload需要使用as属性指定特定的资源类型以便浏览器为其分配一定的优先级，并能够正确加载资源；

5、属性是否支持检测：

const preloadSupported = () => {

const link = document.createElement('link');

const relList = link.relList;

if (!relList || relList.supports)

return false;

return relList.supports('preload');

}

prefetch 和preload_preload和prefetch相关推荐

prefetch 和preload_Preload和Prefetch以及前端项目中的配置
1.vuecli3.x or 4.x默认打包之后,部署到服务器上的项目,会对静态资源的标签上默认加载preload或者prefetch属性, 啥是preload和prefetch呢? Preload的 ...
html prefetch的原理,HTML5 prefetch
声明:此文带着自己的理解,不完全按原文翻译 prefetch 即预加载,在用户需要前我们就将所需的资源加载完毕. 有了浏览器缓存,为何还需要预加载? 用户可能是第一次访问网站,此时还无缓存用户可能清 ...
html prefetch的原理,关闭prefetch
如何关闭prefetch和superfetch win8系统中,SuperFetch(超级预取)功能,此功能尝试预测下次运行的程序并预先加载必要数据到内存,它可以预测一天某个时段中将运行的三个应用程序 ...
prefetch下载SRA 数据
1. SRA数据库简单介绍序列读取档案(SRA)存储来自"下一代"测序技术的原始序列数据,包括Illumina.454.IonTorrent.Complete Genomics. ...
瞒不住了，Prefetch 就是一个大谎言
本文正在参加「金石计划」 Prefetch 是一个谎言我们知道,现在的应用程序已经发展到可以拆分为多个 JavaScript包了,为了获得更好的用户体验,这些 bundle 包通常需要预获取,即 p ...
SRA文件的下载（prefetch）和解压SRA文件（fastq-dump）
sra文件下载方式 NCBI-SRA和EBI-ENA数据库 SRA数据库: Sequence Read Archive:隶属NCBI (National Center for Biotechnolog ...
学会preload和prefetch
preload和prefetch是什么? 我们常说的preload和prefetch,是link标签rel里新增的两种值,用于让浏览器提前加载指定的资源,它们会先被缓存(属于http cache缓存) ...
DDR扫盲—-关于Prefetch(预取)与Burst(突发)的深入讨论
DDR扫盲--关于Prefetch(预取)与Burst(突发)的深入讨论原文转自:DDR扫盲--关于Prefetch与Burst的深入讨论-Felix-电子技术应用-AET-中国科技核心期刊-最丰富 ...
内存Prefetch
最近在用vtune分析程序性能瓶颈时,发现一些内存访问的地方竟然成了cpu热点.经过仔细分析,发现这些热点主要是对大数组非连续位置的访问的引起的.比较消耗cpu的原因应该是cache不命中.因为 ...

prefetch 和preload_preload和prefetch

prefetch 和preload_preload和prefetch相关推荐

最新文章

热门文章