jsliang 求职系列 - 20 - 浏览器缓存

一 目录

不折腾的前端，和咸鱼有什么区别

目录
一 目录
二 前言
三 缓存位置
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 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。

注意点：

1. 必须是 HTTPS。因为它涉及请求拦截，所以必须使用 HTTPS 协议来保障安全。
2. Service Worker 缓存不同于其他机制，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。

3.2 Memory Cache

返回目录

Memory Cache：内存中的缓存，主要是页面上已经下载的样式、脚本、图片等已经抓取到的资源。

注意点：

1. 读取内存中的数据肯定比磁盘快，读取高效。
2. 缓存持续性很短，会随着进程的释放而释放。关闭页面内存中的缓存也就释放了。

3.3 Disk Cache

返回目录

Disk Cache 是存储在硬盘中的缓存，读取速度相对慢点。

注意点：

1. 比起 Memory Cache 胜在容量和存储时效性上。

3.4 Push Cache

返回目录

Push Cache（推送缓存） 是 HTTP/2 中的内容，当以上 3 种缓存都没有命中的时候，它才会被使用。

注意点：

1. 它只在会话（Session）中存在，一旦会话结束就被释放，并且缓存也很短暂。

四 缓存过程

返回目录

如上图，浏览器的缓存过程为：

1. 浏览器 发起一次 HTTP 请求
2. 浏览器缓存 告诉浏览器这边没有该请求的缓存结果和缓存标识
3. 浏览器 向 服务器 发起 HTTP 请求
4. 服务器 返回该请求结果和缓存规则
5. 浏览器 将该请求结果和缓存标识存入浏览器缓存中

五 缓存机制

返回目录

缓存分为 强缓存 和 协商缓存。

强缓存优先于协商缓存进行，若强制缓存生效则直接使用缓存，若不生效则进行协商缓存。

协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么该请求的缓存失效，返回 200，重新返回资源和缓存标识，再存入浏览器中；生效则返回 304，继续使用缓存。

如果强缓存和协商缓存都没有设置，那么浏览器会采用启发式的算法，通常会取响应头中的 Date 减去 Last-Modified 的值的 10% 作为缓存时间。

5.1 强缓存

返回目录

强缓存：不会向服务器发送请求，直接从缓存中读取资源。

强缓存 判断是否缓存的依据来自于是否超出某个时间或者某个时间段，而不关心服务器端文件是否已经更新，这可能会导致加载文件不是服务器端最新的内容（如果需要判断，那就要用 协商缓存）。

• 表示方式：在 Chrome 控制台的 Network 选项中可以看到该请求返回 200 状态码，并且 Size 显示为 from disk cache 或者 from memory cache。
• 实现方式：

1. Expires
2. Cache-Control

• 两者对比：

Expires 是 HTTP/1.0 的产物，Cache-Control 是 HTTP/1.1 的产物。两者同时存在的时候，Cache-Control 优先级高于 Expires。

5.2 协商缓存

返回目录

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程。

5.2.1 协商缓存存在

返回目录

协商缓存存在，返回 304 和 Not Modified。

1. 浏览器 发起 HTTP 请求，先经过 浏览器缓存
2. 浏览器缓存 判断该请求的缓存结果，返回缓存标识
3. 浏览器 携带该标识，向 服务器 发起 HTTP 请求
4. 服务器 返回 304 告诉 浏览器 资源没有更新
5. 浏览器 再次请求这个缓存结果
6. 浏览器缓存 返回该请求的缓存结果

5.2.2 协商缓存失效

返回目录

协商缓存失效，返回 200 和请求结果。

1. 浏览器 发起 HTTP 请求，先经过 浏览器缓存
2. 浏览器缓存 判断该请求的缓存结果失效，返回缓存标识
3. 浏览器 携带该标识，向 服务器 发起 HTTP 请求
4. 服务器 返回 200 告诉 浏览器 资源可以更新了
5. 浏览器 读取并将请求结果和缓存标识存入 浏览器缓存 中

5.2.3 缓存方式

返回目录

1. Last-Modified 和 If-Modified-Since
2. ETag 和 If-None-Match

这点有时候会考，但是具体实践 jsliang 没那个功夫折腾，这里就不献丑了。

六 缓存实例

返回目录

• 频繁变动的资源：设置不使用强缓存，配合协商缓存控制是否返回响应数据。
• 不常变化的资源：设置 Cache-control 强缓存一年等。例如 jQuery 就可以用版本号控制缓存 jquery-3.3.1.min.js，如果后面更新了，那就更换引用 URL，让之前缓存失效。

七 影响缓存

返回目录

1. 打开网页：查找 disk cache 中是否有匹配，有则使用没则发送请求。
2. F5：因为网页没有关闭，所以 memory cache 是可用的，如果匹配会被优先使用。其次才是 disk cache。
3. 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/ 处获得。