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 加载性能(注意不涉及代码算法等),学习为什么加 ...
随机推荐
- Linux基础篇三:文件系统
/bin 实际上是 /usr/bin /sbin 实际上是 /usr/sbin /usr/bin 里面的命令其实是依赖 /lib64 或者 /lib32 ldd /us ...
- mysql自定义函数统计订单状态:GET_ORDER_STATUS()
DELIMITER $$ USE `local_hnyz`$$ DROP FUNCTION IF EXISTS `GET_ORDER_STATUS`$$ CREATE DEFINER=`root`@` ...
- 极简配置,业务上云只需 3min
为了简化账号配置环节,实现本地一键开发部署,Serverless Framework 发布了微信扫码一键登录能力,支持用户在 Serverless Framework 环境扫码注册登陆,用户无需登录控 ...
- python语法基础-异常操作-长期维护
############### python-异常的操作 ############### # 异常:python解释器遇到一个错误,会停止程序的执行,并且提示错误信息,这就是异常, # 抛出异 ...
- Springmvc多视图
Springmvc多视图 多视图是一个方法可以返回json/xml等格式的数据 第一步:导入xml格式支持的jar包 spring-oxm-3.2.0.RC2.jar 第二步:配置支持多视图 < ...
- 对kotlin和java中的synchronized的浅谈
synchronized在java中是一个关键字,但是在kotlin中是一个内联函数.假如分别在java和kotlin代码锁住同一个对象,会发生什么呢,今天写了代码试了试.首先定义people类 12 ...
- F. Moving On
http://codeforces.com/gym/102222/problem/F fory #include<bits/stdc++.h> using namespace std; t ...
- Node.js //TODO
目录 技术背景 开发环境 学习过程 参考资料 结束语 技术背景 开发环境 学习过程 参考资料 结束语
- Kafka、RabbitMQ、RocketMQ、ActiveMQ
一.资料文档 Kafka:中.有kafka作者自己写的书,网上资料也有一些.rabbitmq:多.有一些不错的书,网上资料多.zeromq:少.没有专门写zeromq的书,网上的资料多是一些代码的实现 ...
- python去除列表中重复元素的方法
列表中元素位置的索引用的是L.index 本文实例讲述了Python去除列表中重复元素的方法.分享给大家供大家参考.具体如下: 比较容易记忆的是用内置的set 1 2 3 l1 = ['b','c', ...