关于前端:jsliang-求职系列-20-浏览器缓存

一 目录

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

二 前言

返回目录

知识点：

• 缓存地位

  • 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/ 处取得。