一 目录
不折腾的前端,和咸鱼有什么区别
目录 |
---|
一 目录 |
二 前言 |
三 缓存地位 |
3.1 Service Worker |
3.2 Memory Cache |
3.3 Disk Cache |
3.4 Push Cache |
四 缓存过程 |
五 缓存机制 |
5.1 强缓存 |
5.2 协商缓存 |
5.2.1 协商缓存存在 |
5.2.2 协商缓存生效 |
5.2.3 缓存形式 |
六 缓存实例 |
七 影响缓存 |
八 参考文献 |
二 前言
返回目录
知识点:
-
缓存地位
Service Worker
Memory Cache
Disk Cache
Push Cache
- 缓存过程
-
缓存机制
- 强缓存
- 协商缓存
-
缓存实例
- 频繁变动的资源
- 不常变动的资源
- 影响缓存
前提:为什么须要浏览器缓存?
对于一个数据申请来说:网络申请、后端解决、浏览器响应。
浏览器缓存能够帮忙咱们优化第一点和第三点的性能。
三 缓存地位
返回目录
缓存地位分为 4 点:
Service Worker
Memory Cache
Disk Cache
Push Cache
上面咱们一一看看。
3.1 Service Worker
返回目录
Service Worker
是运行在浏览器背地的独立线程,个别能够用来实现缓存性能。
留神点:
- 必须是
HTTPS
。因为它波及申请拦挡,所以必须应用HTTPS
协定来保障平安。 Service Worker
缓存不同于其余机制,它能够让咱们自在管制缓存哪些文件、如何匹配缓存、如何读取缓存,并且缓存是持续性的。
3.2 Memory Cache
返回目录
Memory Cache
:内存中的缓存,次要是页面上曾经下载的款式、脚本、图片等曾经抓取到的资源。
留神点:
- 读取内存中的数据必定比磁盘快,读取高效。
- 缓存持续性很短,会随着过程的开释而开释。敞开页面内存中的缓存也就开释了。
3.3 Disk Cache
返回目录
Disk Cache
是存储在硬盘中的缓存,读取速度绝对慢点。
留神点:
- 比起
Memory Cache
胜在容量和存储时效性上。
3.4 Push Cache
返回目录
Push Cache
(推送缓存)是 HTTP/2
中的内容,当以上 3 种缓存都没有命中的时候,它才会被应用。
留神点:
- 它只在会话(
Session
)中存在,一旦会话完结就被开释,并且缓存也很短暂。
四 缓存过程
返回目录
如上图,浏览器的缓存过程为:
- 浏览器 发动一次 HTTP 申请
- 浏览器缓存 通知浏览器这边没有该申请的缓存后果和缓存标识
- 浏览器 向 服务器 发动
HTTP
申请 - 服务器 返回该申请后果和缓存规定
- 浏览器 将该申请后果和缓存标识存入浏览器缓存中
五 缓存机制
返回目录
缓存分为 强缓存 和 协商缓存。
强缓存优先于协商缓存进行,若强制缓存失效则间接应用缓存,若不失效则进行协商缓存。
协商缓存由服务器决定是否应用缓存,若协商缓存生效,那么该申请的缓存生效,返回 200
,从新返回资源和缓存标识,再存入浏览器中;失效则返回 304
,持续应用缓存。
如果强缓存和协商缓存都没有设置,那么浏览器会采纳启发式的算法,通常会取响应头中的 Date
减去 Last-Modified
的值的 10%
作为缓存工夫。
5.1 强缓存
返回目录
强缓存:不会向服务器发送申请,间接从缓存中读取资源。
强缓存 判断是否缓存的根据来自于是否超出某个工夫或者某个时间段,而不关怀服务器端文件是否曾经更新,这可能会导致加载文件不是服务器端最新的内容(如果须要判断,那就要用 协商缓存)。
- 示意形式:在 Chrome 控制台的 Network 选项中能够看到该申请返回
200
状态码,并且Size
显示为from disk cache
或者from memory cache
。 - 实现形式:
Expires
Cache-Control
- 两者比照:
Expires
是 HTTP/1.0
的产物,Cache-Control
是 HTTP/1.1
的产物。两者同时存在的时候,Cache-Control
优先级高于 Expires
。
5.2 协商缓存
返回目录
协商缓存就是强制缓存生效后,浏览器携带缓存标识向服务器发动申请,由服务器依据缓存标识决定是否应用缓存的过程。
5.2.1 协商缓存存在
返回目录
协商缓存存在,返回 304
和 Not Modified
。
- 浏览器 发动 HTTP 申请,先通过 浏览器缓存
- 浏览器缓存 判断该申请的缓存后果,返回缓存标识
- 浏览器 携带该标识,向 服务器 发动
HTTP
申请 - 服务器 返回
304
通知 浏览器 资源没有更新 - 浏览器 再次申请这个缓存后果
- 浏览器缓存 返回该申请的缓存后果
5.2.2 协商缓存生效
返回目录
协商缓存生效,返回 200
和申请后果。
- 浏览器 发动 HTTP 申请,先通过 浏览器缓存
- 浏览器缓存 判断该申请的缓存后果生效,返回缓存标识
- 浏览器 携带该标识,向 服务器 发动 HTTP 申请
- 服务器 返回 200 通知 浏览器 资源能够更新了
- 浏览器 读取并将申请后果和缓存标识存入 浏览器缓存 中
5.2.3 缓存形式
返回目录
Last-Modified
和If-Modified-Since
ETag
和If-None-Match
这点有时候会考,然而具体实际 jsliang 没那个功夫折腾,这里就不献丑了。
六 缓存实例
返回目录
- 频繁变动的资源:设置不应用强缓存,配合协商缓存管制是否返回响应数据。
- 不常变动的资源:设置
Cache-control
强缓存一年等。例如jQuery
就能够用版本号管制缓存jquery-3.3.1.min.js
,如果前面更新了,那就更换援用 URL,让之前缓存生效。
七 影响缓存
返回目录
- 关上网页:查找
disk cache
中是否有匹配,有则应用没则发送申请。 - F5:因为网页没有敞开,所以
memory cache
是可用的,如果匹配会被优先应用。其次才是disk cache
。 - Ctrl + F5:浏览器不应用缓存,发送申请头部带
Cache-control
,拿服务器最新内容。
八 参考文献
返回目录
- 深刻了解浏览器的缓存机制【浏览倡议:1h】
- 浏览器缓存【浏览倡议:30min】
- 前端必须要懂的浏览器缓存机制【浏览倡议:10min】
- 对于浏览器缓存你晓得多少【浏览倡议:10min】
- 设计一个无懈可击的浏览器缓存计划:对于思路,细节,ServiceWorker,以及 HTTP/2【浏览倡议:20min】
jsliang 的文档库由 梁峻荣 采纳 常识共享 署名 - 非商业性应用 - 雷同形式共享 4.0 国内 许可协定 进行许可。<br/> 基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/> 本许可协定受权之外的应用权限能够从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处取得。