浏览器缓存

浏览器缓存

一.、缓存存储

1. 启用缓存

① Cache-Control

浏览器会根据 HTTP Response Headers 中的一些字段来决定是否缓存该资源。HTTP Response Headers 中的 Cache-Control 和 Expires 可以启用缓存，这样资源就会被缓存到客户端

Cache-COntrol 可以设置 private、public、max-age、no-cache来启用缓存

Cache-Control: private / public
Cache-Control: max-age = 300
Cache-Control: no-cache

- private：表示该资源只能被浏览器缓存
- public：表示该资源既能被浏览器缓存，也能被任何中间人（比如代理服务器、CDN等）缓存。
- max-age：表示该资源能够被缓存的最大时间，如果设置为 max-age = 0，该资源仍然会被浏览器缓存，只不过立刻就过期了
- no-cache：该资源会被缓存，但是立刻就过期了，因此需要先和服务器确认资源是否发生变化，只有当资源没有变化时，该缓存才会被调用，否则需要去服务器下载。相当于 max-age = 0

② Expires

Expires 标识了缓存的具体过期时间，来控制资源何时过期。通过设置Expires可以启用缓存。不过需要注意 Expires 的值是格林威治时间，不是本地时间。

Expires：Fri, 08 Mar 2021 08:06:09 GMT
Expires: 0 // Expires: 0 仍然会启用缓存，只不过缓存立即过期

③ 优先级
如果同时设置 Cache-Control: max-age=300 和 Expires: 0，只有Cache-Control生效。因为Cache-Control的优先级高于Expires

④ 浏览器的默认行为
即使Reponse Header 中没有设置 Cache-Control 和 Expires，浏览器中可能还会缓存某些资源
这是因为当 Response Header 中有 Last-Modified 但是没有 Cache-Control 和 Expires时，浏览器会用自己的算法来决定这个资源会被缓存多久，这是浏览器为了提升性能进行的优化，每个浏览器的行为可能不一致，有些浏览器甚至没有这样的优化

2. 禁止缓存
   给Cache-Control 设置no-store会禁止浏览器和中间人缓存该资源

3. 缓存目标对象
   一般来说，浏览器只能存储get响应，例如 HTML、JS、CSS、图片等静态资源。因为这些资源不经常发生变化，所以缓存可以帮助提升获取资源的速度。但是像一些POST/DELETE请求，这些请求基本上每一次都不一样，因此也没有什么缓存的价值。

4. 缓存位置
   浏览器可以在内存、硬盘中开辟一个空间用以保存请求资源的副本。经常可以看到 Memory Cache（内存缓存）和 Disk Cache（硬盘缓存），指的就是缓存所在的位置。请求一个资源时，会按照优先级（Serivice Worker => Memory Cache => Disk Cache => Push Cache）一次查找缓存，如果命中缓存则使用缓存，否否则发起网络请求。

① Memory Cache
表示不访问服务器，直接从内存中读取缓存，读取速度较快，但是关闭进程后，缓存的资源随即销毁，一般内存缓存用于存储小文件

② Disk Cache
表示不访问服务器，直接从硬盘中读取。与内存中相比，硬盘的读取速度较慢，但是硬盘缓存持续的时间更长，关闭进程后，缓存的资源依然存在，一般存储较大的文件。

③对比
内存缓存：读取快、持续时间短、容量小
硬盘缓存：读取满、持续时间厂、容量大

二、 缓存的分类

浏览器缓存一般分为两类：强缓存（也称为本地缓存）和协商缓存（也成为弱缓存）

强缓存和协商缓存的共同点在于，如果命中，都是从客户端缓存中加载资源，而不是服务器中加载资源。而不同点在于，强缓存不发送请求到服务器，而协商缓存会发送请求到服务器以验证资源是否过期。普通刷新会启用协商缓存，忽略强缓存。只有在地址栏、收藏夹、输入网址、通过链接引用资源的情况下，浏览器才会启用强缓存。

三、 缓存的过期策略

当缓存过期之后，浏览器会向服务器发起HTTP请求，以确定资源是否发生了变化。如果资源未改变，那么浏览器会继续使用本地的缓存资源；如果资源已经发生了变化，那么浏览器会删除旧的缓存资源，并将新的缓存资源缓存到本地

1. 过期时间

Http Response Header 里面的 Cahe-Control: max-age=xxx 和 Expires 都可以设置缓存的过期时间

① 区别
Expires：标识了该资源过期的时间点，他是一个绝对值，即在这个时间点之后，缓存的资源过期
max-age：标识了该资源能够被缓存的最大时间。它是一个相对值，相对于第一次请求该文档是服务器记录的[请求发起时间]

② 开启时间
当某个资源需要在特定的时间点过期时应该使用 Expires，如果只是为了开启缓存，使用 max-age 可能会比较好。

四、 缓存验证

1. 什么时候进行缓存验证？

① 刷新页面。一般来说，为了确保用户获取到最新的数据，在刷新页面时大部分浏览器都不会再使用缓存中的数据，而是发起一个请求服务器验证
② Response Header 中设置了 Cache-Control: must-revalidate。当缓存的资源过期之后，必须到源服务器去验证，只有确认该资源没有过期，才能继续使用缓存。

2. 缓存验证器
   服务端在返回响应内容的同时，还会在Response Header中设置一些验证标识，当缓存资源过期之后，浏览器就会携带缓存标识向服务器发起请求，服务器通过对比这些标识，就能知道缓存的资源是否发生改变

① 缓存验证标识字段
Header 中的验证标识字段主要有两组：Etag和If-None-Match、Last-Modified和If-Modified-Since

② Last-Modified
Last-Modified 就是一个验证器，服务器在将资源返回给客户端的同时，会将资源的最后修改时间Last-Modified加在Response Header中一起返回。浏览器会为资源标记上该信息，当缓存过期之后，浏览器会把该信息设置到 Requst Header 中的 If-Modified-Since中向服务器发起请求。

如果 If-Modified-Since 中的值和服务器上该资源最终的修改时间一致，就说明该资源没有被修改过，服务端会直接返回304状态码，无响应实体。如果不一致，服务器会返回200状态码，同时和第一次HTTP请求一样，返回响应体和验证器。

③ Etag 
服务器会通过某种算法，为资源计算出一个唯一的标识，在把响应返回给客户端的时候，会在Response Header中加上Etag: 唯一标识符一起返回给客户端

客户端会把 Etag 保存下来，后续请求会将 Etag 作为 Request Header 中 If-None-Match 的值发给服务器。通过对比客户端发过来的 Etag 和 服务器上保存的 Etag 是否一致，就能够知道资源是否发生了变化。如果资源没有发生变化，返回304，客户端继续使用缓存。如果资源已经修改，则返回200。

总结：