原文地址在 我的笔记里，觉得还行就给个 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. jQuery - textarea 自适应内容高度

    <textarea id="textarea"></textarea> <script> function makeExpandingArea( ...

  2. plsql中文显示问号

    1. select userenv('language') from dual 2. 复制查询的值配置系统环境变量 NLS_LANG=AMERICAN_AMERICA.ZHS16GBK 3.配置系统环 ...

  3. 浏览器加载、渲染html的顺序和页面优化

    浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下,渲染(就是把请求的内容显示到浏览器屏幕上)的顺序也是从上到下,下载和渲染是同时进行的. 2. 在渲染到页面的某一部分时,其上面的所有部分 ...

  4. PHP调试工具PHP DEBUG TOOLS 使用方法

    一.安装篇安装前的准备环境:必须得先装X-Debug,至于怎样安装X-Debug请看http://www.xdebug.org/docs/install 1. 从http://www.xdebug.o ...

  5. StartDT_AI_Lab | 开启“数据+算法”定义的新世界

    继「数据中台技术汇」栏目推出以来,获得了不少技术极客的喜爱.作为AI驱动的数据中台创导者,深度关注核心算法技术的自研创新.融合探索,故推出全新AI算法栏目「StartDT_AI_Lab」,主要介绍算法 ...

  6. [LC] 46. Permutations

    Given a collection of distinct integers, return all possible permutations. Example: Input: [1,2,3] O ...

  7. Python基本了解

    1. 计算机基础知识 CPU : 人类的大脑,运算处理问题 内存 : 临时储存数据,断点数据就会消失,存储数据快 硬盘 : 永久存储各种数据,相对于内存存储速度慢 操作系统 : 本质上是一个软件,用于 ...

  8. tmux的基本用法

    tmux的基本用法: tmux #启动 C-b d #挂起,效果如同screen中的C-a d tmux attach #恢复会话,效果如同screen中的screen -r 更多功能(需要在tmux ...

  9. 【Java集合】试读ArrayList源码

    ArrayList简介 ArrayList 是一个数组队列,相当于 动态数组.与Java中的数组相比,它的容量能动态增长.它继承于AbstractList,实现了List, RandomAccess, ...

  10. async样例

    function iniProcessDetail(isjob) { var cursor = logColl.find({}).sort({ip: 1}); var insertbolk = []; ...