前面的话

  基于VUE的前端小站改造成SSR服务器端渲染后,HTML文档会自动使用preload和prefetch来预加载所需资源,本文将详细介绍preload和prefetch的使用

资源优先级

  在介绍preload和prefetch之前,首先要介绍浏览器的资源优先级

  在Chrome浏览器中,不同的资源在浏览器渲染的不同阶段进行加载的优先级不同

  一共分成五个级别

Highest 最高
Hight 高
Medium 中等
Low 低
Lowest 最低

  其中主资源HTML和CSS的优先级最高,其他资源根据情况的不同优先级不一

  JS脚本根据它们在文件中的位置是否异步、延迟或阻塞获得不同的优先级:

  1、网络在第一个图片资源之前阻塞的脚本在网络优先级中是中级

  2、网络在第一个图片资源之后阻塞的脚本在网络优先级中是低级

  3、异步/延迟/插入的脚本(无论在什么位置)在网络优先级中是很低级

  图片(视口可见)将会获得相对于视口不可见图片(低级)的更高的优先级(中级),所以某些程度上 Chrome 将会尽量懒加载这些图片。低优先级的图片在布局完成被视口发现时,将会获得优先级提升

  preload 使用 “as” 属性加载的资源将会获得与资源 “type” 属性所拥有的相同的优先级。比如说,preload as="style" 将会获得比 as=“script” 更高的优先级

  不带 “as” 属性的 preload 的优先级将会等同于异步请求

preload

【定义】

  如下所示,preload是link元素中的rel属性值

<link rel=“preload”> 

  preload 提供了一种声明式的命令,让浏览器提前加载指定资源(加载后并不执行),需要执行时再执行

  这样做的好处在于:

  1、将加载和执行分离开,不阻塞渲染和document的onload事件

  2、提前加载指定资源,不再出现依赖的font字体隔了一段时间才刷出的情况

【创建】

  使用 link 标签静态标记需要预加载的资源

<link rel="preload" href="/path/to/style.css" as="style">

  也可以使用脚本动态创建一个 link 标签后插入到 head 头部

<script>
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'style';
link.href = '/path/to/style.css';
document.head.appendChild(link);
</script>

【检测】

  在不支持 preload 的浏览器环境中,会忽略对应的 link 标签,而若需要做特征检测的话,则可以使用如下代码

const isPreloadSupported = () => {
const link = document.createElement('link');
const relList = link.relList;
if (!relList || !relList.supports) {
return false;
}
return relList.supports('preload');
}

【特性】

  使用 preload 后,不管资源是否使用都将提前加载。若不确定资源是必定会加载的,则不要错误使用 preload,以免本末导致,给页面带来更沉重的负担

  Preload 有 as 属性,浏览器可以设置正确的资源加载优先级,这种方式可以确保资源根据其重要性依次加载, 所以,Preload既不会影响重要资源的加载,又不会让次要资源影响自身的加载;浏览器能根据 as 的值发送适当的 Accept 头部信息;浏览器通过 as 值能得知资源类型,因此当获取的资源相同时,浏览器能够判断前面获取的资源是否能重用

  如果忽略 as 属性,或者错误的 as 属性会使 preload 等同于 XHR 请求,浏览器不知道加载的是什么,因此会赋予此类资源非常低的加载优先级

  Preload 的与众不同还体现在 onload 事件上。也就是说可以定义资源加载完毕后的回调函数

<link rel="preload" href="..." as="..." onload="preloadFinished()">

  比如,可以使用preload的样式表立即生效

<link rel="preload" href="style.css" onload="this.rel=stylesheet">

  此外,preload 不会阻塞 windows 的 onload 事件

  对跨域的文件进行preload时,必须加上 crossorigin 属性

<link rel="preload" as="font" crossorigin href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff">

【二次获取】

  1、不使用as属性

  如果对所 preload 的资源不使用明确的 “as” 属性,将会导致二次获取

  2、字体文件

  preload 字体不带 crossorigin 会二次获取! 确保对 preload 的字体添加 crossorigin 属性,否则字体文件会被下载两次,这个请求使用匿名的跨域模式。这个建议也适用于字体文件在相同域名下,也适用于其他域名的获取(比如说默认的异步获取)

【警告】

  没有用到的 preload 资源在 Chrome 的 console 里会在 onload 事件 3s 后发生警告

prefetch

  如下所示,prefetch是link元素中的rel属性值

<link rel=“prefetch”>

  它的作用是告诉浏览器加载下一页面可能会用到的资源,注意,是下一页面,而不是当前页面。因此该方法的加载优先级非常低,也就是说该方式的作用是加速下一个页面的加载速度

【区分】

  preload 是告诉浏览器页面必定需要的资源,浏览器一定会加载这些资源

  prefetch 是告诉浏览器页面可能需要的资源,浏览器不一定会加载这些资源

  在VUE SSR生成的页面中,首页的资源均使用preload,而路由对应的资源,则使用prefetch

<link rel="preload" href="./manifest.js" as="script">
<link rel="preload" href="./vendor.js" as="script">
<link rel="preload" href="./app.js" as="script">
<link rel="prefetch" href="./vendor-async.js">
<link rel="prefetch" href="./user.js">
<link rel="prefetch" href="./comment.js">
<link rel="prefetch" href="./category.js">
<link rel="prefetch" href="./post.js">
<link rel="prefetch" href="./home.js">

  所以,对于当前页面很有必要的资源使用 preload,对于可能在将来的页面中使用的资源使用 prefetch

【不要混用】

  preload 和 prefetch 混用的话,并不会复用资源,而是会重复加载

<link rel="preload"   href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff" as="font">
<link rel="prefetch" href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff" as="font">

  使用 preload 和 prefetch 的逻辑可能不是写到一起,但一旦发生对用一资源 preload 或 prefetch 的话,会带来双倍的网络请求

prefetch和preload的更多相关文章

  1. prefetch 和 preload 及 webpack 的相关处理

    使用预取和预加载是网站性能和用户体验提升的一个很好的途径,本文介绍了使用 prefetch 和 prefetch 进行预取和预加载的方法,并使用 webpack 进行实现 Link 的链接类型 < ...

  2. prefetch vs preload vs prerender vs preconnect All In One

    prefetch vs preload vs prerender vs preconnect All In One 前端性能优化 prefetch 预获取 https://developer.mozi ...

  3. Webpack 4教程 - 第八部分 使用prefetch和preload进行动态加载

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://wanago.io/2018/08/13/webpack-4-course-part ...

  4. Preload,Prefetch 和它们在 Chrome 之中的优先级

    前言 上周五到的时候,想起之前在手游平台上有处理dns-prefetch的优化,那这篇分享的就更仔细了.今日早读文章由@gy134340翻译并授权分享. 正文从这开始- 今天我们来深入研究一下 Chr ...

  5. Web 性能优化:Preload与Prefetch的使用及在 Chrome 中的优先级

    摘要: 理解Preload与Prefetch. 原文:Web 性能优化:Preload,Prefetch的使用及在 Chrome 中的优先级 作者:前端小智 Fundebug经授权转载,版权归原作者所 ...

  6. [PWA] Optimize Assets Delivery using preload and prefetch

    By default, browsers load the assets in a render-blocking way. Modern browsers introduced prefetch a ...

  7. preload、prefetch的认识

    预加载 现在的网络情况虽然很乐观,但是 defer和async 当浏览器碰到 script 脚本的时候: <script src="script.js"></sc ...

  8. preload & prefetch

    原文地址在 我的笔记里,觉得还行就给个 star 吧:) 关于 preload 和 prefetch 早有耳闻,知道它们可以优化页面加载速度,然具体情况却了解不多.搜索了相关的资料后对其有了些认识,在 ...

  9. 如何配置 webpack 支持 preload, prefetch, dns-prefetch

    如何配置 webpack 支持 preload, prefetch, dns-prefetch webpack , preload, prefetch https://webpack.js.org/p ...

随机推荐

  1. CF1204E Natasha, Sasha and the Prefix Sums (卡塔兰数推理)

    题面 题解 把题意变换一下,从(0,0)走到(n,m),每次只能网右或往上走,所以假设最大前缀和为f(n),那么走的时候就要到达但不超过 y = x-f(n) 这条线, 我们可以枚举答案,然后乘上方案 ...

  2. C++ 对于函数名的操作,函数名本身和取*以及取&的区别

    void TestFunc() { } int _tmain(int argc, _TCHAR* argv[]) { cout<<TestFunc<<endl; cout< ...

  3. Hack The Box( Starting Point )

    Hack The Box [Starting Point] 初始点 -- 了解渗透测试的基础知识. 这一章节对于一个渗透小白来说,可以快速的成长.以下将提供详细的解题思路,与实操步骤. TIER 0 ...

  4. Ansible_基础模块

    特点:无主从,即装即用,基于ssh 安装ansible yum install epel-release -y yum install ansible -y 定义主机清单 vim /etc/ansib ...

  5. LibTorch 多项分布

    最近在学习过程中需要对服从某种分布的离散型随机变量进行抽样,在LibTroch中查到了torch::multinomial(多项分布),该方法的接口如下: at::Tensor multinomial ...

  6. 【Azure 环境】Azure Resource Graph Explorer 中实现动态数组数据转换成多行记录模式 - mv-expand

    问题描述 想对Azure中全部VM的NSG资源进行收集,如果只是查看一个VM的NSG设定,可以在门户页面中查看表格模式,但是如果想把导出成表格,可以在Azure Resource Graph Expl ...

  7. Logstash:在 Docker 中部署 Logstash

    文章转载自:https://elasticstack.blog.csdn.net/article/details/116516923 创建一个目录 docker-logstash.在该目录下,有如下的 ...

  8. logstash 读取MySQL数据到elasticsearch 相差8小时解决办法

    logstash和elasticsearch是按照UTC时间的,kibana却是按照正常你所在的时区显示的,是因为kibana中可以配置时区信息. 具体看这个: logstash 的配置文件添加 fi ...

  9. 17. Fluentd输出插件:out_copy用法详解

    copy即复制,out_copy的作用就是将日志事件复制到多个输出,这样就可以对同一份日志做不同类型的分析处理. out_copy内置于Fluentd,无需单独安装. 示例配置 <match p ...

  10. SVM公式详尽推导,没有思维跳跃。

    假定数据集\(T=\{(x_1,y_1),(x_2,y_2),...,(x_n,y_n)\},x_n \in R_k, y_n \in \{1,-1\}\)线性可分,SVM的优化目标是: 优化一个超平 ...