preload对比prefetch的功能区别详解

目录
  • 一、前言
  • 二、preload
    • 2-1.定义：
    • 2-2.好处：
    • 2-3注意：
    • 2-4.特殊用法
  • 三、prefetch
    • 3-1.定义：
    • 3-2.实例：
  • 四、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区别的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 解决RabbitMq消息队列Qos Prefetch消息堵塞问题

    mq是实现代码扩展的有利手段,个人喜欢用概念来学习新知识,介绍堵塞问题的之前,先来段概念的学习. ConnectionFactory:创建connection的工厂类 Connection: 简单理解为socket Channel:和mq交互的接口,定义queue.exchange和绑定queue.exhange等接口都是它. 接下来就是和mq的交互类 exchange:简单地看成路由,类型不是重点,看看官网即可 queue:客户端监听的是queue,而不是exchange,但是使用queue的

  • 使用preload预加载页面资源时注意事项

    使用preload预加载页面资源时注意事项

    preload 提供了一种声明式的命令,让浏览器提前加载指定资源(加载后并不执行),在需要执行的时候再执行.提供的好处主要是 将加载和执行分离开,可不阻塞渲染和 document 的 onload 事件 提前加载指定资源,不再出现依赖的 font 字体隔了一段时间才刷出 如何使用 preload 使用 link 标签创建 <!-- 使用 link 标签静态标记需要预加载的资源 --> <link rel="preload" href="/path/to/st

  • Preload基础使用方法详解

    PreloadJS是一个用来管理和协调相关资源加载的类库,它可以方便的帮助你预先加载相关资源,例如 图片,文件,音频,数据,其他 它使用了XHR2来提供实时的加载进度信息,如果不支持则使用标签式的简化进度来实现进度展示. 支持多队列,多连接,暂停队列等等功能 在PreloadJS中,LoadQueue是主要用来预加载内容的API.LoadQueue是一个加载管理器,可以预先加载一个文件或者一个文件队列. var queue = new createjs.LoadQueue(true); 以上代码

  • 使用PreloadJS加载图片资源的基础方法详解

    一. 使用createjs里的LoadQueue函数实现异步加载图片,监听加载进度 1.实例对象LoadQueue加载队列对象 var queue = new createjs.LoadQueue(false); 2.需要监听常用到的三个方法 //监听进度事件 queue.on("progress", function (e) { }); //监听加载事件 queue.on("fileload", function (e) { }); //监听完成事件 queue.

  • javascript preload&lazy load

    复制代码 代码如下: (function($) { (function($) { $.preload = function(data, cfg) { return new Loader(data, cfg); }; var maps = {}, on = $.event.add, un = $.event.remove, head = document.getElementsByTagName('head')[0], body = document.body, bs = $.browser, i

  • preload对比prefetch的功能区别详解

    目录 一.前言 二.preload 2-1.定义: 2-2.好处: 2-3注意: 2-4.特殊用法 三.prefetch 3-1.定义: 3-2.实例: 四.preload 和 prefetch 的区别 一.前言 在使用@vue/cli工具构建的项目,打包上线之后,一般都能看到<link rel="preload">和<link rel="prefetch">这样的标签,对于preload与prefetch的作用和区别一直以来都不是太了解,所

  • React DOM diff 对比Vue DOM diff 区别详解

    目录 React DOM diff 和 Vue DOM diff 的区别 React DOM diff 代码查看流程 总结 React DOM diff 和 Vue DOM diff 的区别 React 是从左向右遍历对比,Vue 是双端交叉对比. React 需要维护三个变量(我看源码发现是五个变量),Vue 则需要维护四个变量. Vue 整体效率比 React 更高,举例说明:假设有 N 个子节点,我们只是把最后子节点移到第一个,那么 React 需要进行借助 Map 进行 key 搜索找到

  • 再谈PHP中单双引号的区别详解

    在PHP中,字符串的定义可以使用英文单引号' ',也可以使用英文双引号" ". 但是必须使用同一种单或双引号来定义字符串,如:'Hello World"和"Hello World'为非法的字符串定义. 单引号和双引号到底有啥区别呢?下面通过本文学习一下吧. 1.定义字符串 在PHP中,字符串的定义可以使用单引号,也可以使用双引号.但是必须使用同一种单或双引号来定义字符串,如:'Hello"和"Hello'为非法的字符串定义. 定义字符串时,只有一

  • node.js中grunt和gulp的区别详解

    node.js中grunt和gulp的区别详解 自nodeJS登上前端舞台,自动化构建变得越来越流行.目前最流行的当属grunt和gulp,这两个光看名字挺像,功能也差不多,不过gulp能在grunt这位大哥如日中天的境况下开辟出自己的一片天地,有着她独到的优点. 易用 Gulp相比Grunt更简洁,而且遵循代码优于配置策略,维护Gulp更像是写代码. 高效 Gulp相比Grunt更有设计感,核心设计基于Unix流的概念,通过管道连接,不需要写中间文件. 高质量 Gulp的每个插件只完成一个功能

  • java 中同步、异步、阻塞和非阻塞区别详解

    java 中同步.异步.阻塞和非阻塞区别详解 简单点说: 阻塞就是干不完不准回来,一直处于等待中,直到事情处理完成才返回: 非阻塞就是你先干,我先看看有其他事没有,一发现事情被卡住,马上报告领导. 我们拿最常用的send和recv两个函数来说吧... 比如你调用send函数发送一定的Byte,在系统内部send做的工作其实只是把数据传输(Copy)到TCP/IP协议栈的输出缓冲区,它执行成功并不代表数据已经成功的发送出去了,如果TCP/IP协议栈没有足够的可用缓冲区来保存你Copy过来的数据的话

  • iOS开发微信收款到账语音提醒功能思路详解

    iOS开发微信收款到账语音提醒功能思路详解

    一.背景 为了解决小商户老板们在频繁交易中不方便核对.确认到账的痛点,产品MM提出了新版本需要支持收款到账语音提醒功能.这篇文章总结了开发过程中遇到的坑和一些小技巧. 二.技术方案 后台唤醒App 收款到账语音提醒需要收款方在收到款后,播放一段TTS合成语音播报金额,微信在前台时可以通过模板消息将需要播报的金额带下来,再请求TTS数据并播放,但是app在挂起或者被kill掉的情况下要如何请求语音数据并播放呢? iOS提供了两种方式唤醒处于挂起或已经被kill掉的app.分别是Silent Not

  • python中import reload __import__的区别详解

    import 作用:导入/引入一个python标准模块,其中包括.py文件.带有__init__.py文件的目录(自定义模块). import module_name[,module1,...] from module import *|child[,child1,...] 注意:多次重复使用import语句时,不会重新加载被指定的模块,只是把对该模块的内存地址给引用到本地变量环境. 实例: pythontab.py #!/usr/bin/env python #encoding: utf-8

  • Javascript(es2016) import和require用法和区别详解

    本文介绍了Javascript(es2016) import和require用法和区别详解,分享给大家,具体如下: 写个简单js文件,假设名字为:lib.js . 假设内容如下: export const sqrt = Math.sqrt; export function square(x) { return x * x; } export function diag(x, y) { return sqrt(square(x) + square(y)); } 这样就可以在其他地方对lib中定义的

  • 关于g++和gcc的相同点和区别详解

    gcc和g++的区别和联系 gcc和g++都是GNU(一个组织)的编译器. 1.对于.c后缀的文件,gcc把它当做是C程序:g++当做是C++程序: 2.对于.cpp后缀的文件,gcc和g++都会当做c++程序. 3.编译阶段,g++会调用gcc; 4.连接阶段,通常会用g++来完成,这是因为gcc命令不能自动和c++程序使用的库连接.   gcc/g++在执行编译工作的时候,总共需要4步 1.预处理,生成.i的文件[预处理器cpp] 2.将预处理后的文件转换成汇编语言,生成文件.s[编译器eg

  • Python探索之静态方法和类方法的区别详解

    面相对象程序设计中,类方法和静态方法是经常用到的两个术语. 逻辑上讲:类方法是只能由类名调用:静态方法可以由类名或对象名进行调用. python staticmethod and classmethod Though classmethod and staticmethod are quite similar, there's a slight difference in usage for both entities: classmethod must have a reference to

随机推荐