原文地址在 我的笔记里，觉得还行就给个 star 吧：）

关于 preload 和 prefetch 早有耳闻，知道它们可以优化页面加载速度，然具体情况却了解不多。搜索了相关的资料后对其有了些认识，在此记录一下。

preload

通常在页面中，我们需要加载一些脚本和样式，而使用 preload 可以对当前页面所需的脚本、样式等资源进行预加载，而无需等到解析到 script 和 link 标签时才进行加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。

使用方式

将 link 标签的 rel 属性的值设为 preload，as 属性的值为资源类型（如脚本为 script，样式表为 style）

<head>

  <meta charset="utf-8">

  <title>preload example</title>

  <!-- 对 style.css 和 index.js 进行预加载 -->

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

  <link rel="preload" href="index.js" as="script">

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <div id="app"></div>

  <script src="index.js"></script>

</body>

prefetch

与 preload 一样，都是对资源进行预加载，但是 prefetch 加载的资源一般不是用于当前页面的，即未来很可能用到的这样一些资源，简单点说就是其他页面会用到的资源。当然，prefetch 不会像 preload 一样，在页面渲染的时候加载资源，而是利用浏览器空闲时间来下载。当进入下一页面，就可直接从 disk cache 里面取，既不影响当前页面的渲染，又提高了其他页面加载渲染的速度。

使用方式

同 preload 很相似，无需指定 as 属性：

<head>

  <meta charset="utf-8">

  <title>preload example</title>

  <!-- 对 style.css 和 index.js 进行 preload 预加载 -->

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

  <link rel="preload" href="index.js" as="script">

  <!-- 对资源进行 prefetch 预加载 -->

  <link rel="prefetch" href="next.css">

  <link rel="prefetch" href="next.js">

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <div id="app"></div>

  <script src="index.js"></script>

</body>

总结

对当前页面需要的资源，使用 preload 进行预加载，对其它页面需要的资源进行 prefetch 预加载。

preload & prefetch的更多相关文章

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

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

  2. Preload，Prefetch 和它们在 Chrome 之中的优先级

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

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

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

  4. preload、prefetch的认识

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

  5. 一步一步学会preload和prefetch

    preload和prefetch是什么? 我们常说的preload和prefetch,是link标签rel里新增的两种值,用于让浏览器提前加载指定的资源,它们会先被缓存(属于http cache缓存) ...

  6. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  7. vue 工作学习总结

    配置ESlint yarn 初始化 yarn init yes 添加依赖 yarn add [package] 升级依赖 yarn upgrade [package] 移出依赖 yarn remove ...

  8. Vue SSR初探

    因为之前用nuxt开发过应用程序,但是nuxt早就达到了开箱即用的目的,所以一直对vue ssr的具体实现存在好奇. 构建步骤 我们通过上图可以看到,vue ssr 也是离不开 webpack 的打包 ...

  9. 常见 Web 性能优化方式

    这篇文章是我阅读 Web Performance 101 之后的进行的粗糙的翻译作为笔记,英语还行的童鞋可以直接看原文. 这篇文章主要介绍了现代 web 加载性能(注意不涉及代码算法等),学习为什么加 ...

随机推荐

  1. NOIP2002 过河卒（DFS，DP）

    https://www.luogu.org/problem/P1002 题目描述 如图,A 点有一个过河卒,需要走到目标 B 点.卒行走规则:可以向下.或者向右.同时在棋盘上的任一点有一个对方的马(如 ...

  2. JavaMail读取收件箱退信邮件/分析邮件附件获取Message_Id

    需求描述:公司最近有个项目邮件通知功能,但是客户上传的邮件地址并不一定存在,以及其他的各种问题.所有希望发送通知后有个回执,及时发现地址存在问题的邮箱. 需求分析:经过分析JavaMail可以读取收件 ...

  3. 吴裕雄--天生自然C语言开发：循环

    while(condition) { statement(s); } #include <stdio.h> int main () { /* 局部变量定义 */ ; /* while 循环 ...

  4. [HNOI2003]操作系统 优先队列用法

    题:https://www.cometoj.com/problem/1046 #include<bits/stdc++.h> using namespace std; typedef lo ...

  5. 结构体struct,类class

    1.struct,值类型,结构体会自动生成初始化方法,class是引用类型 struct Person { var name : String var age : Int func simpleDes ...

  6. OpenCV 使用FLANN进行特征点匹配

    #include <stdio.h> #include <iostream> #include "opencv2/core/core.hpp" #inclu ...

  7. Linux文件属性和权限

     Linux文件属性 第一栏:表示文件类型和权限 文件的类型:  d:目录    -:文件    l:链接文件    b:可存储设备    c:可输入设备 第一组:表示拥有者权限 第二组:表示该组的权 ...

  8. JavaScript秒转换成天-小时-分钟-秒

    根据时间秒转换成天-小时-分钟-秒 // 秒转换成day.hour.minutes.seconds formatSecond(second: number) { const days = Math.f ...

  9. ionic2踩坑之ionic build android报错

    自己项目一直跑的好好好好的,build还是run都没问题,今天忽然一个小伙伴build一直报错.\ 错误如下: Error occurred during initialization of VMCo ...

  10. drf三大认证

    源码分析 """ 1)APIView的dispath(self, request, *args, **kwargs) 2)dispath方法内 self.initial( ...