原文地址在 我的笔记里，觉得还行就给个 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. 三十七、www服务nginx进阶

    六.查看nginx默认首页和目录:如下,可以看到,默认的目录是html,首页是index.html [root@djw1 conf]# grep html nginx.conf            ...

  2. redis簡單命令

  3. 109）PHP与oracle网址

    https://pecl.php.net/package/oci8/2.1.8/windowshttps://www.toadworld.com/platforms/oracle/w/wiki/116 ...

  4. 浅谈PHP小马免杀

    在渗透测试过程初期,上传小马,拿到 webshell 再进行下一步的操作,现如今的网站安全更多是 一些云防护.CDN防护.服务器安全软件等等,给渗透测试.提权等带来了一定难度的提升, 今天探讨一下如何 ...

  5. [LC] 112. Path Sum

    Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all ...

  6. deeplearning.ai 序列模型 Week 2 NLP & Word Embeddings

    1. Word representation One-hot representation的缺点:把每个单词独立对待,导致对相关词的泛化能力不强.比如训练出“I want a glass of ora ...

  7. java学习——反射机制

    /* * JAVA反射机制是在运行状态中,对于任意一个类 (class文件),都能够知道这个类的所有属性和方法: * 对于任意一个对象,都能够调用它的任意一个方法和属性: * 这种动态获取的信息以及动 ...

  8. eclipse 大括号改为C语言一样的代码块

    如图:找到Windows->Preferences->Java->Code Style->Formatter: 然后,点击右边的Edit按钮: 按如下图完成

  9. 配置gitlab（备忘）

    已经配置好github的基础上,clone gitlab 地址git status 显示改变了的文件但是webstorm文件颜色不改变问题的解决:VCS->git-->remotes--& ...

  10. html中的select下拉框

    <select name="effective"> <option value="">请选择</option> <op ...