原文地址在 我的笔记里，觉得还行就给个 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. WdatePicker插件知识整理（一）

    当WdatePicker.js里的属性:$wdate=true时,在input里加上class="Wdate"就会在选择框右边出现日期图标,如果您不喜欢这个样式,可以把class= ...

  2. Linux基础篇六：Linux文件属性和类型

    -:代表文件 s: sorket文件 b:block块设备 (磁盘,光驱等) c:字符设备 l:连接文件 p:管道文件 d:代表目录文件 为了更加区分- (文件的具体类型),系统提供了file命令更加 ...

  3. D. Salary Changing（找中位数）

    题:https://codeforces.com/contest/1251/problem/D 题意:给你n个单位需要满足达到的区间,再给个s,s是要分配给n的单位的量,当然∑l<=s,问经过分 ...

  4. python类的书写、调用

    注意:stu1=Luffy('xing',19)   和  Luffy.__init__(stu1,'xing',19) 是等价的. 查看类的使用方法 粘贴一个网上python学习资料

  5. 关于k8s资源类型和缩写

    资源类型 缩写 描述 clusters     componentstatuses cs   configmaps cm   daemonsets ds   deployments deploy   ...

  6. JavaScript--DOM，BOM

    前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...

  7. Margin of Error|sample size and E

    8.3 Margin of Error 由该公式可知: To improve the precision of the estimate, we need to decrease the margin ...

  8. Web服务器的配置与管理

    Web服务器的配置与管理(2) 虚拟主机技术 在上篇博文中,我们已经利用IIS搭建好了一台Web服务器,并可以成功访问IIS中自带的默认站点,那么我们是否可以在这台服务器中再创建另外一个Web站点?也 ...

  9. 0-1背包问题-DP

    中文理解: 0-1背包问题:有一个贼在偷窃一家商店时,发现有n件物品,第i件物品价值vi元,重wi磅,此处vi与wi都是整数.他希望带走的东西越值钱越好,但他的背包中至多只能装下W磅的东西,W为一整数 ...

  10. Mybatis-Generator相关配置demo

    generatorConfig.xml配置信息 首先在resource中配置好datasource.propertise文件,包括数据库信息和mysql-connector的jar包位置. <? ...