prefetch是什么,prefetch和preload的区别

　　本文主要介绍预加载和预取的区别。有需要的朋友可以借鉴一下，希望能有所帮助。祝大家进步很大，早日升职加薪。

　　一.序言二预装2-1。定义：2-2。好处：2-3注：2-4。特殊用法三。预取3-1。定义：3-2。例四。预加载和预取之间的差异

目录

　　用@vue/cli工具构建的项目打包上线后，一般可以看到link rel=preload 和link rel=prefetch 这样的标签。不太了解预加载和预取的作用和区别，正文会详细介绍。

　　要了解预加载和预取的作用和区别，您必须熟悉浏览器加载资源的优先级。

　　如图所示：

　　其中HTML和CSS的基本骨架结构优先级最高。用as属性加载的预加载资源将获得与资源“type”属性相同的优先级。例如，预加载as=style 将获得比as="script "更高的优先级。不带as属性的预加载将具有与异步请求相同的优先级。

一、前言

二、preload

　　link元素的rel属性的属性值preload允许您在HTML页面的head元素内部编写一些声明性的资源获取请求，这些请求可以指示页面加载后立即需要哪些资源。Preload提供了一个声明性命令，允许浏览器预先加载指定的资源(加载后不会执行)，然后在需要执行的时候执行。

2-1.定义：

　　分开加载和执行，不阻塞渲染和文档的onload事件。提前加载指定的资源，不会再出现依赖字体字体过一会儿就打印出来的情况。

2-2.好处：

　　使用preload后，无论资源是否被使用，都将被提前加载。如果你不确定资源一定会被加载，不要滥用预加载来避免性能问题。Preload有as属性，浏览器可以设置正确的资源加载优先级，可以保证资源按照重要性顺序加载。所以preload不会影响重要资源的加载，次要资源也不会影响自身的加载；浏览器可以根据as的值发送适当的接受报头信息；浏览器可以通过as值知道资源类型，所以当获取的资源相同时，浏览器可以判断之前获取的资源是否可以重用。如果as属性被忽略，或者错误的as属性会使preload等于XHR请求，浏览器不知道加载的是什么，所以会给这样的资源很低的加载优先级。如果不使用preload resources的explicit as属性，就会导致二次习得。Preload在不使用crossorigin的情况下加载字体资源，它将被再次获取。

2-3注意：

　　Preload可以定义资源加载后的回调函数，如下：link rel= preload href= 3359tiven.cn/js/test.js rel= external noflowl rel= external noflowl rel= external noflowl as= JavaScript onload= preload handle。

　　可以使用预加载的样式表会立即生效。link rel= preload href= demo . CSS rel= external no follow onload= this . rel=style sheet

　　要加载跨域资源，必须添加crossorigin属性。link rel= preload as= style cross origin href= https://test . com/CSS/test . CSS rel= external no follow

　　链接标签还可以接收用于简单媒体查询的媒体属性。 link rel= preload href= https://tiven . cn/img/BG . png rel= external no follow as= image media=(max-width:640 px)

2-4.特殊用法

三、prefetch

　　link元素的rel属性的属性值prefetch允许您在HTML页面的head元素内部编写一些声明性的资源获取请求，告诉浏览器加载可能在下一个页面中使用的资源。请注意，这是下一页，而不是当前页。所以这种方法的加载优先级很低，也就是说这种方法的作用是加快下一页的加载速度。

3-1.定义：

　　link rel=prefetch href=。/js/01 . js rel= external no follow

　　link rel=prefetch href=。/js/02 . js rel= external no follow

3-2.实例：

　　Preload是告诉浏览器页面必须需要的资源，浏览器会加载这些资源。预取是告诉浏览器页面可能需要的资源，浏览器不一定加载这些资源。VUE SSR生成的页面中，首页的资源使用preload，而路由对应的资源使用prefetch。对当前页面所需的资源使用preload，对未来页面可能使用的资源使用prefetch。注意：使用预加载和预取的逻辑可能不会写在一起，但是一旦发生资源预加载或预取，就会带来双重网络请求。

　　link rel= preload href= https://tiven . cn/js/test . js rel= external no follow rel= external no follow rel= external no follow as= JavaScript

　　link rel= prefetch href= https://tiven . cn/js/test . js rel= external no follow rel= external no follow rel= external no follow as= JavaScript

　　这就是预加载和预取之间的区别的细节。更多关于预加载和预取的区别，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。