一步一步学会preload和prefetch
preload和prefetch是什么？
我们常说的preload和prefetch，是link标签rel里新增的两种值，用于让浏览器提前加载指定的资源，它们会先被缓存（属于http cache缓存），达到优化网页速度的目的。
本文将以代码示例的形式一步步讲解preload和prefetch。
1.准备四个文件：index.html，index.js，prefetch.js，preload.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>preload prefetch</title>
<link rel="stylesheet" href="index.css">
<link rel="preload" href="preload.js" as="script"> <!-- 新增 -->
</head>
<body>
<script src="index.js"></script>
<script src="preload.js"></script>
</body>
</html>
index.js
console.log('index')
preload.js
console.log('preload')
prefetch.js
console.log('prefetch')
2.运行一下页面，想象一下页面的网络加载顺序，可以看到结果:
3.把准备好的preload.js以preload形式插入index.html
注意：不要漏掉as属性，它用来指定预加载的资源类型，没有as属性会导致浏览器发出警告<link rel=preload> must have a valid `as` value
这时候再观察浏览器的请求顺序，会发现preload.js的加载比index.js提前了，甚至比index.css还要提前。
再看控制台输出的执行结果：
这说明preload会把资源加载的优先级提高。
在这个过程里，preload会先预加载好preload.js资源，但是不会立即执行，等到script标签引入preload.js的时候才会执行。
preload除了可以加载js文件，还可以加载很多其他类型的问题，只要改变as的值即可，比如style，image，font，video，一样可以起到改变加载优先级的作用。
4.修改index.html代码，引入prefetch.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>preload prefetch</title>
<link rel="stylesheet" href="index.css">
<link rel="preload" href="preload.js" as="script">
<link rel="prefetch" href="prefetch.js"> <!-- 新增 -->
</head>
<body>
<script src="index.js"></script>
<script src="preload.js"></script>
</body>
</html>
再次观察现在的网络加载的情况
可以看到虽然prefetch的link标签位置很高，但是prefetch.js的加载优先级并不高。
再看一下控制台输出
控制台输出并没有变，说明prefetch.js并未执行。
可以看出prefetch的优先级比较低，它主要用于预加载本页面未来可能加载到的资源或者跳转到的页面。
所以src里除了填写js文件地址，也可以是网址，为a标签的跳转链接做预加载用。
一步一步学会preload和prefetch的更多相关文章
- 使用Python一步一步地来进行数据分析总结
原文链接:Step by step approach to perform data analysis using Python译文链接:使用Python一步一步地来进行数据分析--By Michae ...
- 【Linux】一步一步学Linux——Linux版本(03)
目录 00. 目录 01. Linux内核版本 02. Linux内核官方网站 03. Linux发行版本 04. Linux发行版本介绍 4.1 Ubuntu 4.2 RedHat 4.3 Debi ...
- ruby+selenium-webdriver一步一步完成自动化测试-----准备篇
这一系列文章目的不是讲ruby,也不是讲selenium-webdriver,而是通过一个登录soso首页的小例子讲怎样一步一步写好自动化测试.目标是:面向对象编程,实现逻辑与数据分离. 如果你觉得已 ...
- 如何一步一步用DDD设计一个电商网站（九）—— 小心陷入值对象持久化的坑
阅读目录 前言 场景1的思考 场景2的思考 避坑方式 实践 结语 一.前言 在上一篇中(如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成),有一行注释的代码: public interfa ...
- 如何一步一步用DDD设计一个电商网站（八）—— 会员价的集成
阅读目录 前言 建模 实现 结语 一.前言 前面几篇已经实现了一个基本的购买+售价计算的过程,这次再让售价丰满一些,增加一个会员价的概念.会员价在现在的主流电商中,是一个不大常见的模式,其带来的问题是 ...
- 如何一步一步用DDD设计一个电商网站（十）—— 一个完整的购物车
阅读目录 前言 回顾 梳理 实现 结语 一.前言 之前的文章中已经涉及到了购买商品加入购物车,购物车内购物项的金额计算等功能.本篇准备把剩下的购物车的基本概念一次处理完. 二.回顾 在动手之前我对之 ...
- 如何一步一步用DDD设计一个电商网站（七）—— 实现售价上下文
阅读目录 前言 明确业务细节 建模 实现 结语 一.前言 上一篇我们已经确立的购买上下文和销售上下文的交互方式,传送门在此:http://www.cnblogs.com/Zachary-Fan/p/D ...
- 如何一步一步用DDD设计一个电商网站（六）—— 给购物车加点料，集成售价上下文
阅读目录 前言 如何在一个项目中实现多个上下文的业务 售价上下文与购买上下文的集成 结语 一.前言 前几篇已经实现了一个最简单的购买过程,这次开始往这个过程中增加一些东西.比如促销.会员价等,在我们的 ...
- 如何一步一步用DDD设计一个电商网站（五）—— 停下脚步，重新出发
阅读目录 前言 单元测试 纠正错误,重新出发 结语 一.前言 实际编码已经写了2篇了,在这过程中非常感谢有听到观点不同的声音,借着这个契机,今天这篇就把大家提出的建议一个个的过一遍,重新整理,重新出发 ...
随机推荐
- K8S从入门到放弃系列-(7)kubernetes集群之kube-scheduler部署
摘要: 1.Kube-scheduler作为组件运行在master节点,主要任务是把从kube-apiserver中获取的未被调度的pod通过一系列调度算法找到最适合的node,最终通过向kube-a ...
- Druid基本配置
最近公司要用Druid 所以看了下基本配置及配置过程中出现的问题 Druid是什么? Druid是阿里巴巴开源平台上一个数据库连接池实现,它结合了C3P0.DBCP.PROXOOL等DB池的优点,同时 ...
- Python【HTTP响应状态码】
# HTTP响应状态码 ## 1xx:临时响应 #### 表示临时响应并需要请求者继续执行操作的状态代码. 100 **继续**请求者应当继续提出请求.服务器返回此代码表示已收到请求的第一部分,正 ...
- Oracle数据库——ROWNUM
Oracle数据库--ROWNUM 前言 刚学到了ROWNUM的用法,网上一搜,结果发现了有很多帖子,写的都很全.本着好记性不如烂笔头的原则,我还是决定自己手打一遍,当然下面也附上了我参考的链接. ...
- 少儿编程 | 02.Scratch编程环境
上次课程介绍了Scratch的基本概念和一些特点,最后还给出了一些有趣的例子.本次课程介绍Scratch的两种编程环境以及在Scratch官网注册个人账号的步骤. Scratch 3.0的两种编程环境 ...
- 19-MySQL DBA笔记-操作系统、硬件、网络的优化
第19章 操作系统.硬件.网络的优化 本章将介绍操作系统和硬件的性能优化,对于硬件,我们主要讲述CPU.内存.磁盘阵列及固态硬盘.任何优化,首先都需要有足够的数据支持,对于操作系统下性能数据的收集,这 ...
- (八) Hibernate中的Session以及事务
HibernateUtil.getSessionFactory().getCurrentSession() 和HibernateUtil.getSession() 的区别: 1.异:getCurren ...
- 查准率（precision）和查全率（recall）
一.理解查准率(precision)& 查全率(recall) 我们在平时常用到的模型评估指标是精度(accuracy)和错误率(error rate),错误率是:分类错误的样本数站样本总数的 ...
- [C#] LINQ之SelectMany和GroupJoin
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- Centos 在VM中设置静态ip
cd /etc/sysconfig/network-scripts 然后代开第一个文件 一般是ifcfg-ens331)开始配置原来是这样的 修改/etc/sysconfig/network # Cr ...