一 目录
不折腾的前端，和咸鱼有什么区别
| 目录 |
|---|
| 一 目录 |
| 二 前言 |
| 三 缓存位置 |
| 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 WorkerMemory CacheDisk CachePush Cache
- 缓存过程
- 缓存机制
- 强缓存
- 协商缓存
- 缓存实例
- 频繁变动的资源
- 不常变化的资源
- 影响缓存
前提：为什么需要浏览器缓存？
对于一个数据请求来说：网络请求、后端处理、浏览器响应。
浏览器缓存可以帮助我们优化第一点和第三点的性能。
三 缓存位置
缓存位置分为 4 点：
Service WorkerMemory CacheDisk CachePush 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。 -
实现方式：
ExpiresCache-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-SinceETag和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 国际 许可协议 进行许可。
基于 github.com/LiangJunron… 上的作品创作。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。
