preload & prefetch
原文地址在 我的笔记里，觉得还行就给个
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的更多相关文章
- 如何配置 webpack 支持 preload, prefetch, dns-prefetch
如何配置 webpack 支持 preload, prefetch, dns-prefetch webpack , preload, prefetch https://webpack.js.org/p ...
- Preload，Prefetch 和它们在 Chrome 之中的优先级
前言 上周五到的时候,想起之前在手游平台上有处理dns-prefetch的优化,那这篇分享的就更仔细了.今日早读文章由@gy134340翻译并授权分享. 正文从这开始- 今天我们来深入研究一下 Chr ...
- Web 性能优化：Preload与Prefetch的使用及在 Chrome 中的优先级
摘要: 理解Preload与Prefetch. 原文:Web 性能优化:Preload,Prefetch的使用及在 Chrome 中的优先级 作者:前端小智 Fundebug经授权转载,版权归原作者所 ...
- preload、prefetch的认识
预加载 现在的网络情况虽然很乐观,但是 defer和async 当浏览器碰到 script 脚本的时候: <script src="script.js"></sc ...
- 一步一步学会preload和prefetch
preload和prefetch是什么? 我们常说的preload和prefetch,是link标签rel里新增的两种值,用于让浏览器提前加载指定的资源,它们会先被缓存(属于http cache缓存) ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
- vue 工作学习总结
配置ESlint yarn 初始化 yarn init yes 添加依赖 yarn add [package] 升级依赖 yarn upgrade [package] 移出依赖 yarn remove ...
- Vue SSR初探
因为之前用nuxt开发过应用程序,但是nuxt早就达到了开箱即用的目的,所以一直对vue ssr的具体实现存在好奇. 构建步骤 我们通过上图可以看到,vue ssr 也是离不开 webpack 的打包 ...
- 常见 Web 性能优化方式
这篇文章是我阅读 Web Performance 101 之后的进行的粗糙的翻译作为笔记,英语还行的童鞋可以直接看原文. 这篇文章主要介绍了现代 web 加载性能(注意不涉及代码算法等),学习为什么加 ...
随机推荐
- The equal-likelihood model|event|experiment|probability model
5.1Probability Basics uncertainty is inherent in inferential statistics,因为总是需要样本估计总体,The science of ...
- BZOJ3566 [SHOI2014]概率充电器 (树形DP&概率DP)
3566: [SHOI2014]概率充电器 Description 著名的电子产品品牌 SHOI 刚刚发布了引领世界潮流的下一代电子产品——概率充电器:“采用全新纳米级加工技术,实现元件与导线能否通电 ...
- java成神之路
一.基础篇 1.1 JVM 1.1.1. Java内存模型,Java内存管理,Java堆和栈,垃圾回收 http://www.jcp.org/en/jsr/detail?id=133 http://i ...
- jmeter json乱码
0 环境 系统环境:win7 1 操作 1 找到jmeter.properties 找到jmeter下的bin目录jmeter.properties文件 例如apache-jmeter-\bin\jm ...
- MRP执行计划列表（禁用）
1.最直接的方法,推进方法 2.比较麻烦的方法
- [LC] 13. Roman to Integer
Roman numerals are represented by seven different symbols: I, V, X, L, C, Dand M. Symbol Value I 1 V ...
- Struts配置文件以Spring的方式实现自定义加载
在使用struts时,我们需要在web.xml中配置过滤器,同时我们需要配置struts的配置文件路径来加载项目中struts的相关配置信息.如果我们不配置路径的话,Struts会有一些默认的加载路径 ...
- 吴裕雄--天生自然 R语言开发学习：数据集和数据结构
数据集的概念 数据集通常是由数据构成的一个矩形数组,行表示观测,列表示变量.表2-1提供了一个假想的病例数据集. 不同的行业对于数据集的行和列叫法不同.统计学家称它们为观测(observation)和 ...
- 使用这些高效Java工具类享受开发乐趣
使用这些高效Java工具类享受开发乐趣导语在Java中,工具类定义了一组公共方法,这篇文章将介绍Java中使用最频繁及最通用的Java工具类.在开发中,使用这些工具类,不仅可以提高编码效率,还可以提高 ...
- B 小雨的三角形
题目链接:https://ac.nowcoder.com/acm/contest/949/B 思路: 一个找规律题,找到规律就很简单,只剩下代码实现了.规律:第i行去头尾剩下的数的和等于第i-1行去头 ...