浏览器的缓存机制 - 知乎 可以多想一想系统时间的问题
想要加快浏览器加载网络资源的速度，有以下方法：
- 减少响应内容大小：如使用 HTTP/2 的压缩头部功能和 gzip 算法压缩响应体内容
- 使用「缓存」：把一些资源存储下来，从而无需再次加载
使用缓存要尽可能地让浏览器从缓存中获取资源，并保证被使用的缓存与服务端最新的资源保持一致。一般只缓存静态资源（js、css、img）
Web 缓存按存储位置来区分，包括数据库缓存、服务端缓存、CDN 缓存和浏览器缓存。这里我们着重介绍一下浏览器缓存。
浏览器缓存通过 HTTP/HTTPS 实现，存储位置有四种：
- Service Worker
- Memory Cache（内存缓存）
- Disk Cache（硬盘缓存）
- Push Cache（推送缓存）
以上缓存全部没有命中就会进行网络请求。
Service Worker
Service Worker 是运行在浏览器背后的独立线程，可以用来实现缓存功能。使用 Service Worker 的话，传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。
Memory Cache
Memory Cache 是内存中的缓存，主要包含的是当前中页面中已经抓取到的资源,例如页面上已经下载的样式、脚本、图片等。读取内存中的数据高效，但是缓存持续性很短。一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。而且由于计算机中的内存比硬盘容量小得多，我们能够使用存储缓存的内存并不多。
内存缓存在缓存资源时并不关心返回资源的 HTTP 缓存头 Cache-Control，同时资源的匹配也并非仅仅是对 URL 做匹配，还可能会对 Content-Type，CORS 等其他特征做校验。
Disk Cache
Disk Cache 是存储在硬盘中的缓存，读取速度比 Memory Cache 慢，但是存储量更大。它会根据 HTTP Herder 中的字段判断哪些资源需要缓存，哪些资源可以不请求直接使用，哪些资源已经过期需要重新请求。
Push Cache
Push Cache（推送缓存）是 HTTP/2 中的内容，当以上三种缓存都没有命中时，它才会被使用。它只在会话（Session）中存在，一旦会话结束就被释放，并且缓存时间也很短暂，在Chrome浏览器中只有5分钟左右，同时它也并非严格执行HTTP头中的缓存指令。
浏览器什么时候会把缓存存储到内存中，什么时候存储到硬盘中呢？一般来说：
- 小文件优先存储到内存中，反之存储到硬盘中
- 使用频率高的缓存到硬盘中
我们讲到 Disk Cache 时说道浏览器会严格按照 HTTP 缓存规则存储缓存，那么 HTTP 缓存规则是什么呢？
HTTP 缓存
根据是否需要向服务器重新发起 HTTP 请求，将缓存过程分为两个部分：强制缓存和协商缓存：
- 强缓存：浏览器直接从本地缓存中获取数据，不与服务器进行交互。
- 协商缓存：浏览器发送请求到服务器，服务器判定是否可使用本地缓存。
两种缓存方式最终使用的都是本地缓存；前者无需与服务器交互，后者需要。
一、强制缓存
强制缓存是在浏览器加载资源的时候，先检查缓存时间是否过期，若未过期则直接从缓存中查找请求结果，如果缓存时间过期或不存在该缓存结果，则向服务端发起请求。
设置缓存时间的方法有两种（响应头字段）：
- Expires（HTTP/1.0）
- Cache-Control（HTTP/1.1）
Expires
HTTP/1.0 中使用响应头部字段 Expires 来设置缓存过期时间。客户端第一次请求时，服务端会在响应头部添加 Expires 字段。当浏览器再次发送请求时，先会对比当前时间和 Expires 对应的时间，如果当前时间早于 Expires 时间，那么直接使用缓存；反之，需要再次发送请求。
上述 Expires 信息告诉浏览器：在 2020.10.10 日之前，可以直接使用该请求的缓存。
问题：
- 服务端和浏览器的时间可能不同，导致缓存过期时间出现偏差
- 客户端可以通过修改系统时间来继续使用缓存或提前使缓存失效
为了解决这个问题，HTTP/1.1 提出了 Cache-Control 响应头部字段。
Cache-Control
它的常用值有下面几个：
no-cache：表示使用协商缓存，即每次使用缓存前必须向服务端确认缓存资源是否更新；
no-store：禁止浏览器以及所有中间缓存存储响应内容；
public：公有缓存，表示可以被代理服务器缓存，可以被多个用户共享；
private：私有缓存，不能被代理服务器缓存，不可以被多个用户共享；
max-age：以秒为单位的数值，表示缓存的有效时间；
must-revalidate：当缓存过期时，需要去服务端校验缓存的有效性。
此 Cache-Control 信息告诉浏览器该缓存为公有缓存，有效期 1 年。
强制缓存中，cache-control 的 max-age 优先级高于 Expires
200 状态码一定是服务器返回的吗？
不是。命中强缓存的话，会直接从内存或者磁盘中读取资源，并返回一个200状态码，具体操作可以试试浏览器的前进后退键。
二、协商缓存
协商缓存不指定缓存的有效时间，而是在请求时直接发送资源标识到服务端确认缓存是否需要更新，如果请求响应返回的 HTTP 状态为 304，则表示缓存仍然有效；否则返回状态码 200 、最新的资源和最新的资源标识。
控制缓存的难题就从浏览器端转移到了服务端。
资源标识（在 Response Header 中）有两种：
- Last-Modified：资源的最后修改时间
- Etag：资源的唯一标识（一个字符串）
Last-Modified 和 If-Modified-Since:
服务端通过响应头部字段 Last-Modified 和请求头部字段 If-Modified-Since 比对双方资源的修改时间，来确定缓存是否需要更新。具体工作流程如下：
- 浏览器第一次请求资源，服务端在返回资源的响应头中加入 Last-Modified 字段，表示这个资源在服务端上的最近修改时间；
- 当浏览器再次向服务端请求该资源时，请求头部带上之前服务端返回的 Last-Modified，这个请求头叫 If-Modified-Since；
- 服务端再次收到请求，根据 If-Modified-Since 的值，判断相关资源是否有变化，如果没有，则返回 304 Not Modified，浏览器使用资源缓存值；否则返回资源内容，且更新 Last-Modified 响应头内容。
这种方式虽然能判断缓存是否失效，但也存在三个问题：
- 精度问题：Last-Modified 的时间精度为秒，如果在 1 秒内发生修改，那么缓存判断会失效
- 准度问题：如果一个文件被修改后又被还原，内容没有发生变化，却仍然需要重新请求
- 服务器问题：某些服务器不能精确的得到文件的最后修改时间
因此我们需要 ETag
ETag 和 If-None-Match
为了解决精度问题和准度问题，HTTP 提供了另一种依赖于文件哈希值的精确判断缓存的方式：响应头部字段 ETag 和请求头部字段 If-None-Match。具体工作流程如下：
- 浏览器第一次请求资源，服务端在返响应头中加入 Etag 字段，Etag 字段值为该资源的哈希值；
- 当浏览器再次跟服务端请求这个资源时，在请求头上加上 If-None-Match，值为之前响应头部字段 ETag 的值；
- 服务端再次收到请求，将请求头 If-None-Match 字段的值和响应资源的哈希值进行比对，如果两个值相同，则说明资源没有变化，返回 304 Not Modified；否则就正常返回资源内容，无论是否发生变化，都会将计算出的哈希值放入响应头部的 ETag 字段中。
这种缓存比较的方式也会存在一些问题，具体表现在以下两个方面：
- 计算成本。对于大文件而言，读取完整的文件内容生成哈希值开销较大；只读取文件部分内容，又容易判断出错。
- 计算误差。不同服务端可能会采用不同的哈希值计算方式。所以同一个资源在两台服务端产生的 Etag 可能是不相同的。对于使用服务器集群来处理请求的网站来说，使用 Etag 的缓存命中率会有所降低。
两者中会优先使用 Etag：
- Last-Modified 只能精确到秒级
- 如果资源被重复生成，而内容不变，Etag 更加精准
响应头示例：
总结
缓存的优先级：
- 强制缓存的优先级高于协商缓存:
- 强制缓存中：cache-control 的 max-age 优先级高于 Expires
- 协商缓存中：Etag 优先级比 Last-Modified 高。
用户行为
禁用缓存
服务器禁用缓存：
- Cache-Control: max-age=0, must-revalidate
- Cache-Control: no-cache
- Cache-Control: no-store
浏览器禁用缓存：
- 改变 url，加上
?xi=xixi - 设置请求 header
总结
缓存是解决性能问题的重要手段，使用缓存的好处很多，除了能让浏览器更快地加载网络资源之外，还会带来其他好处，比如节省网络流量和带宽，以及减少服务端的负担。
296
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
