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 加载性能(注意不涉及代码算法等),学习为什么加 ...
随机推荐
- oracle安装和使用
1.0 安装 2.0 初始化 1.使用 sqlplus 连接oracle数据库 1)在cmd中输入sqlplus /nolog 2)使用管理员账户登录orcl数据库实例 conn sys/gzsx ...
- 系统学习Javaweb5----JavaScript1
注意:java和JavaScript没有半毛钱关系!!! 说明:过年歇着歇着不知不觉就歇了七天,嘿嘿,从今天开始继续学习. 学习笔记: 1.JavaScript概述. 1.1.JavaScript是什 ...
- Java接口和抽象类区别
1.抽象类 [public] abstract class ClassName { abstract void fun(); } extends 包含抽象方法的类称为抽象类,但并不意味着抽象类中只能有 ...
- iOS动画效果合集、飞吧企鹅游戏、换肤方案、画板、文字效果等源码
iOS精选源码 动画知识运用及常见动画效果收集 3D卡片拖拽卡片叠加卡片 iFIERO - FLYING PENGUIN 飞吧企鹅SpriteKit游戏(源码) Swift封装的空数据提醒界面Empt ...
- [LC] 106. Construct Binary Tree from Inorder and Postorder Traversal
Given inorder and postorder traversal of a tree, construct the binary tree. Note:You may assume that ...
- [LC] 76. Minimum Window Substring
Given a string S and a string T, find the minimum window in S which will contain all the characters ...
- 浏览器证书问题，chorm,ie,edge,safari都会去读系统证书，firefox例外
坑爹 没想过浏览器兼容的问题. 为系统安装用户证书后, firefox一直无法连接 提示 连接 www.httpsserver.com:8985 时发生错误. SSL 对等端无法协商出一个可接受的安全 ...
- SpringBoot中Shiro使用Pac4j集成CAS认证
SpringBoot中Shiro使用Pac4j集成CAS认证 Pac4j 简介 Pac4j与Shiro,Spring Security一样都是权限框架,并且提供了OAuth - SAML - CAS ...
- 【转载/部分修改】超实用STL——set的入门使用
本文部分转载自他人博文,少部分自行进行了添改qwq 参考文章:https://blog.csdn.net/chaoyueziji123/article/details/38422211 作者:chao ...
- leetcode简单题6
今天的华师 Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, fro ...