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的更多相关文章

  1. 使用Python一步一步地来进行数据分析总结

    原文链接:Step by step approach to perform data analysis using Python译文链接:使用Python一步一步地来进行数据分析--By Michae ...

  2. 【Linux】一步一步学Linux——Linux版本(03)

    目录 00. 目录 01. Linux内核版本 02. Linux内核官方网站 03. Linux发行版本 04. Linux发行版本介绍 4.1 Ubuntu 4.2 RedHat 4.3 Debi ...

  3. ruby+selenium-webdriver一步一步完成自动化测试-----准备篇

    这一系列文章目的不是讲ruby,也不是讲selenium-webdriver,而是通过一个登录soso首页的小例子讲怎样一步一步写好自动化测试.目标是:面向对象编程,实现逻辑与数据分离. 如果你觉得已 ...

  4. 如何一步一步用DDD设计一个电商网站（九）—— 小心陷入值对象持久化的坑

    阅读目录 前言 场景1的思考 场景2的思考 避坑方式 实践 结语 一.前言 在上一篇中(如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成),有一行注释的代码: public interfa ...

  5. 如何一步一步用DDD设计一个电商网站（八）—— 会员价的集成

    阅读目录 前言 建模 实现 结语 一.前言 前面几篇已经实现了一个基本的购买+售价计算的过程,这次再让售价丰满一些,增加一个会员价的概念.会员价在现在的主流电商中,是一个不大常见的模式,其带来的问题是 ...

  6. 如何一步一步用DDD设计一个电商网站（十）—— 一个完整的购物车

     阅读目录 前言 回顾 梳理 实现 结语 一.前言 之前的文章中已经涉及到了购买商品加入购物车,购物车内购物项的金额计算等功能.本篇准备把剩下的购物车的基本概念一次处理完. 二.回顾 在动手之前我对之 ...

  7. 如何一步一步用DDD设计一个电商网站（七）—— 实现售价上下文

    阅读目录 前言 明确业务细节 建模 实现 结语 一.前言 上一篇我们已经确立的购买上下文和销售上下文的交互方式,传送门在此:http://www.cnblogs.com/Zachary-Fan/p/D ...

  8. 如何一步一步用DDD设计一个电商网站（六）—— 给购物车加点料，集成售价上下文

    阅读目录 前言 如何在一个项目中实现多个上下文的业务 售价上下文与购买上下文的集成 结语 一.前言 前几篇已经实现了一个最简单的购买过程,这次开始往这个过程中增加一些东西.比如促销.会员价等,在我们的 ...

  9. 如何一步一步用DDD设计一个电商网站（五）—— 停下脚步，重新出发

    阅读目录 前言 单元测试 纠正错误,重新出发 结语 一.前言 实际编码已经写了2篇了,在这过程中非常感谢有听到观点不同的声音,借着这个契机,今天这篇就把大家提出的建议一个个的过一遍,重新整理,重新出发 ...

随机推荐

  1. MySQL 配置参数优化

    MySQL 配置参数优化 1.修改back_log参数值:由默认的50修改为500 back_log=500back_log值指出在MySQL暂时停止回答新请求之前的短时间内多少个请求可以被存在堆栈中 ...

  2. [转帖]CPU时间片

    CPU时间片 https://www.cnblogs.com/xingzc/p/6077214.html CPU的时间片 CPU的利用率好CPU的 load average 是不一样的 Conntex ...

  3. 关于npm install 报错 EAI_AGAIN reason: getaddrinfo EAI_AGAIN registry.npmjs.org

    在公司里使用了isa连接外网,刚开始使用npm 安装依赖的时候一直报错EAI_AGAIN reason: getaddrinfo EAI_AGAIN registry.npmjs.org,我们的老大给 ...

  4. JVM —— 类文件结构（下）

    简介 Java虚拟机的指令由一个字节长度的.代表着某种特定操作含义的操作码(opcode)以及跟随其后的零至多个代表此操作所需参数的操作数(operand)所构成 虚拟机中许多指令并不包含操作数.只有 ...

  5. LIUNX随堂学习-1 用户及查看信息

    1.useradd   #创建用户             例如:useradd ljj     创建一个名为ljj的用户 2.userdel -r    #删除用户         例如:userd ...

  6. Oracle数据库——查询所有用户

    查询数据库所有用户(ALL_USERS)的用户名,用户编号,创建日期 默认应该有36个用户 SELECT * FROM ALL_USERS; 查看ALL_USERS的结构 DESC ALL_USERS ...

  7. I2C读写EEPROM—EEPROM简介

    EEPROM 是一种掉电后数据不丢失的存储器,常用来存储一些配置信息,以便系统重新上电的时候加载之.EEPOM 芯片最常用的通讯方式就是 I 2C 协议,本小节以 EEPROM 的读写实验为大家讲解如 ...

  8. S04_CH01_搭建工程移植LINUX/测试EMMC/VGA

    S04_CH01_搭建工程移植LINUX/测试EMMC/VGA 1.1概述: 本章内容是在已经提供安装了VIVADO2015.4 的ubuntu系统下,进行.大家可以下周我们已经提供的虚拟机镜像,我们 ...

  9. Scratch教程：谁是真悟空

    在西游记中,有一集是“真假悟空”,六耳猕猴变成了悟空的模样与真悟空真假难辨,打的不可开交. 在Scartch中,我们常常会使用一个本体来生成多个克隆体,这在开发过程中有重要的意义.但在实际操作中,每个 ...

  10. MacBook使用HHKB键盘设置

    问题: macbook上使用hhkb的时候,很纠结档位4要不要开,开启4号DIP开关后,虽然会使HHKB键盘上减少一个“◇(Win键)”键,但是会在键盘左侧多出一个“FN”键.多出来的左“FN”键,不 ...