探索浏览器的缓存机制 ｜ 青训营

一、什么是浏览器缓存

百度百科 浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览
白话文 浏览器缓存其实就是让用户非首次进入页面时，使用之前缓存下来的资源（图片，样式表等），以加快页面加载速度，节省网络流量

二、浏览器缓存的位置

• 内存缓存浏览器会将一部分资源保存在内存中，例如正在访问的页面的 DOM 对象、JavaScript 解释器等
  优点内存缓存速度快，但容量有限，通常仅用于临时存储
• 磁盘缓存大部分缓存数据会被保存在硬盘上的特定目录中，例如 HTML 页面、CSS 文件、JS 文件、图片等
  优点磁盘缓存相对于内存缓存来说容量更大，可以保存较多的资源

三、浏览器缓存的过程

由上图我们可以知道：

• 浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识
• 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中
• 等再次发起请求时，就会根据现有的缓存规则标识，决定是否使用缓存

四、浏览器缓存的分类

根据是否需要向服务器重新发起HTTP请求将缓存过程分为两个部分，分别是强制缓存和协商缓存

• 强制缓存

  强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程。当浏览器向服务器发起请求时，服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是 Expires 和 Cache-Control，其中Cache-Control优先级比Expires高。

  强制缓存的情况主要有三种，如下：

  1. 不存在该缓存结果和缓存标识，强制缓存失效，则直接向服务器发起请求（跟第一次发起请求一致）。
  2. 存在该缓存结果和缓存标识，但该结果已失效，强制缓存失效，则使用协商缓存。
  3. 存在该缓存结果和缓存标识，且该结果尚未失效，强制缓存生效，直接返回该结果

• 协商缓存

  协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，同样，协商缓存的标识也是在响应报文的HTTP头中和请求结果一起返回给浏览器的，控制协商缓存的字段分别有：Last-Modified / If-Modified-Since 和 Etag / If-None-Match，其中Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高。协商缓存主要有以下两种情况：

  1. 协商缓存生效，返回304
  2. 协商缓存失效，返回200和请求结果结果

五、浏览器缓存的优缺点

• 优点：提高性能，减少网络流量，降低服务器负载，改善用户体验
• 缺点：可能导致过期的内容被呈现，缓存更新不及时，缓存占用存储空间

六、浏览器缓存的策略

Google Chrome 浏览器

Google浏览器在处理 HTTP 请求时，会根据缓存策略来确定是否从缓存中获取响应，以提高性能和减少网络流量。
Chrome 浏览器采用了灵活的缓存机制，并通过多个缓存控制头字段来实现不同类型资源的缓存策略。

1. Cache-Control: Cache-Control 是最常见的缓存控制头字段之一。它可以指定缓存的行为，包括以下一些指令：

   • public：响应可以被任意缓存（如浏览器缓存、CDN）缓存。
   • private：响应只能被单个用户的私有缓存缓存，例如浏览器缓存。这是默认值。
   • max-age：指定响应在被缓存前的最大有效时间（以秒为单位）。
   • no-cache：强制浏览器在使用缓存之前发送请求到服务器进行验证。
   • no-store：禁止浏览器和所有中间缓存存储任何版本的响应。

2. Expires: Expires 是一个过时的缓存控制头字段，它指定了响应的到期时间，即响应在到期之前可以被缓存并重复使用。它的值是一个特定日期/时间字符串。

3. ETag: ETag 是一个资源的唯一标识符，由服务器生成，用于缓存验证。浏览器在将请求发送到服务器时，可以使用 If-None-Match 头字段将之前获取的 ETag 值发送给服务器，以检查资源是否已更改。如果服务器返回 304 Not Modified 状态码，表示资源未更改，浏览器可以使用缓存副本。

4. Last-Modified: Last-Modified 表示资源的上次修改时间。类似于 ETag，浏览器可以使用 If-Modified-Since 头字段将之前获取的 Last-Modified 值发送给服务器进行缓存验证。

5. Pragma: Pragma 头字段用于向 浏览器 发送特定的缓存指令。常见的值包括 no-cache（强制进行缓存验证）和 no-store（禁止缓存响应）。

总结

在开发网页应用时，合理利用浏览器缓存可以极大地提升性能和用户体验。通过将静态资源缓存在客户端，可以减少网络请求次数，加快页面加载速度，并减轻服务器负载。然而，缓存并非没有缺点。过期的缓存可能导致呈现过时的内容，而且缓存管理也需要考虑到缓存清理和更新的问题。因此，在实际开发中，我们需要根据具体的业务需求和安全性要求，权衡利弊，选择适当的缓存策略和管理方式。