preload对比prefetch的功能区别详解
更新时间：2022年06月30日 15:30:21 作者：天問
这篇文章主要为大家介绍了preload对比prefetch的使用区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
一、前言
在使用@vue/cli工具构建的项目，打包上线之后，一般都能看到<link rel="preload">和<link rel="prefetch">这样的标签，对于preload与prefetch的作用和区别一直以来都不是太了解，所以文本就详细介绍一下。
想要了解preload与prefetch的作用和区别，就不得不先熟悉浏览器加载资源的优先级。
如图：
- 其中HTML基本骨架结构和CSS的优先级最高
- preload 使用 as 属性加载的资源将会获得与资源 “type” 属性所拥有的相同的优先级。比如说，preload as="style" 将会获得比 as=“script” 更高的优先级。
- 不带 as 属性的 preload 的优先级将会等同于异步请求。
二、preload
2-1.定义：
- <link>元素的 rel 属性的属性值preload能够让你在你的HTML页面中<head>元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。
- preload 提供了一种声明式的命令，让浏览器提前加载指定资源(加载后并不执行)，需要执行时再执行。
2-2.好处：
- 将加载和执行分离开，不阻塞渲染和document的onload事件。
- 提前加载指定资源，不再出现依赖的font字体隔了一段时间才刷出的情况。
2-3注意：
- 使用 preload 后，不管资源是否使用都将提前加载。若不确定资源是必定会加载的，则不要错误使用 preload，以免出现性能问题。
- preload 有 as 属性，浏览器可以设置正确的资源加载优先级，这种方式可以确保资源根据其重要性依次加载， 所以，preload 既不会影响重要资源的加载，又不会让次要资源影响自身的加载；浏览器能根据 as 的值发送适当的 Accept 头部信息；浏览器通过 as 值能得知资源类型，因此当获取的资源相同时，浏览器能够判断前面获取的资源是否能重用。
- 如果忽略 as 属性，或者错误的 as 属性会使 preload 等同于 XHR 请求，浏览器不知道加载的是什么，因此会赋予此类资源非常低的加载优先级。
- 如果对所 preload 的资源不使用明确的 as 属性，将会导致二次获取。
- preload加载font字体资源不带 crossorigin 也会二次获取。
2-4.特殊用法
- preload 可以定义资源加载完毕后的回调函数，如下：
<link rel="preload" href="https://tiven.cn/js/test.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" as="javascript" onload="preloadHandle()">
- 可以使用preload的样式表立即生效。
<link rel="preload" href="demo.css" rel="external nofollow" onload="this.rel=stylesheet">
- 对于加载跨域的资源，必须加上 crossorigin 属性。
<link rel="preload" as="style" crossorigin href="https://test.com/css/test.css" rel="external nofollow" >
- link标签还可以接收一个media属性，进行简单的媒体查询。
<link rel="preload" href="https://tiven.cn/img/bg.png" rel="external nofollow" as="image" media="(max-width: 640px)">
三、prefetch
3-1.定义：
<link>元素的 rel 属性的属性值prefetch能够让你在你的HTML页面中<head>元素内部书写一些声明式的资源获取请求，告诉浏览器加载下一页面可能会用到的资源，注意是下一页面，而不是当前页面。因此该方法的加载优先级非常低，也就是说该方式的作用是加速下一个页面的加载速度。
3-2.实例：
<link rel="prefetch" href="./js/01.js" rel="external nofollow" > <link rel="prefetch" href="./js/02.js" rel="external nofollow" >
四、preload 和 prefetch 的区别
- preload 是告诉浏览器页面必定需要的资源，浏览器一定会加载这些资源。
- prefetch 是告诉浏览器页面可能需要的资源，浏览器不一定会加载这些资源。
- 在VUE SSR生成的页面中，首页的资源均使用preload，而路由对应的资源，则使用prefetch。
- 对于当前页面很有必要的资源使用 preload，对于可能在将来的页面中使用的资源使用 prefetch。
注意： 使用 preload 和 prefetch 的逻辑可能不是写到一起，但一旦发生对用一资源 preload 或 prefetch 的话，会带来双倍的网络请求。
<link rel="preload" href="https://tiven.cn/js/test.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" as="javascript"> <link rel="prefetch" href="https://tiven.cn/js/test.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" as="javascript">
以上就是preload对比prefetch的使用区别详解的详细内容，更多关于preload对比prefetch区别的资料请关注脚本之家其它相关文章！
相关文章
Vue.set() this.$set()引发的视图更新思考及注意事项
this.$set()和Vue.set()本质方法一样，前者可以用在methods中使用。这篇文章主要介绍了Vue.set() this.$set()引发的视图更新思考及注意事项,需要的朋友可以参考下2018-08-08
vue中router.beforeEach()的简单用法举例
router.beforeEach()一般用来做一些进入页面的限制,比如没有登录,就不能进入某些页面,只有登录了之后才有权限查看某些页面,下面这篇文章主要给大家介绍了关于vue中router.beforeEach()的简单用法举例,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了封装Vue Element的table表格组件的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2020-08-08
这篇文章主要介绍了Vue项目使用CDN优化首屏加载问题,本文以vue、vuex、vue-touter为例，给大家介绍处理流程，需要的朋友可以参考下2018-04-04
这篇文章主要为大家介绍了Vue编译器AST抽象语法树源码分析详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
在 vue 里我们可以通过全局事件总线来实现任意组件之间通信，它的原理是给 Vue 的原型对象上面添加一个属性。这样的话我所有组件的都可以访问到这个属性，然后可以通过这个属性来访问其他组件给这个属性上面绑定的一些方法，从而去传递数据2022-08-08
本文主要介绍了Vue+Element的后台管理框架，在框架上，领导要用AdminLTE这套模板，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
vue.js添加一些触摸事件以及安装fastclick的实例
今天小编就为大家分享一篇vue.js添加一些触摸事件以及安装fastclick的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了在 Vue 中使用 iframe 嵌套页面,使用 iframe 技术可以实现多个页面之间的数据传递和交互，提高了网站的整体性能和用户体验，需要的朋友可以参考下2023-05-05
这篇文章主要介绍了详解vue文件中使用echarts.js的两种方式，主要介绍了两种使用方式，一种是以组件的形式另一种直接引入，非常具有实用价值，需要的朋友可以参考下2018-10-10
最新评论