浏览器缓存

注

将会在之后重新更新此文章

概念

浏览器缓存指的就是：在访问网页时，对一些网页资源、网络资源进行存储到本地。这样，当用户下次访问时，可以直接使用缓存数据，而不需要再次去服务端下载，从而提高网页加载速度。

我们可以将浏览器缓存人为分为两种类型：

1. 强缓存
   浏览器不向服务器发送请求，直接使用存储在本地的数据。
2. 协商缓存
   浏览器会向服务器发送请求，但会通过某些手段判断是否返回304，告诉浏览器使用本地缓存内容。

强缓存

浏览器的强缓存是浏览器缓存的一种策略，它指的是当浏览器请求某个资源时，在资源的缓存有效期内，浏览器直接从本地缓存中读取并使用该资源，而不发送请求到服务器。

Cache-Control

指定请求的有效期

1. 浏览器通过请求访问服务端
2. 服务端主动设置请求返回的一个响应头为 Cache-Control:max-age，
3. 对于有 Cache-Control 响应头的请求，浏览器将会缓存此请求的数据。
   当第一次访问请求得到 Cache-Control 设置的有效期，浏览器在下一次访问此请求时，如果此请求的缓存仍然是有效期，那么浏览器将不访问服务器，而是直接使用缓存的数据。

Expires

指定请求的缓存过期时间

1. 浏览器通过请求访问服务端
2. 服务端主动设置请求返回的一个响应头为 Expires

3. 对于有 Expires 响应头的请求，的浏览器将会缓存此请求的数据。

   当 当前时间 < Expires 设置的过期时间 时，浏览器将会在下一次访问此请求时，不访问服务器，而是使用缓存的数据。

协商缓存

通过请求头和响应头的配合，来告诉浏览器此次请求是否使用缓存

ETag / If-None-Matche

1. 浏览器通过请求访问服务端
2. 服务端主动设置请求返回的一个响应头为：ETag
   ETag: 通过某种方式进行签名（如 md5 对请求和请求 id 进行签名），得到一个唯一值
3. 浏览器拿到此响应头 ETag 后，将 ETag 和此请求的数据存储到本地
4. 浏览器发起下一次请求时，添加请求头：If-None-Match: ETag

5. 服务端接收到此请求，通过某种方式得到新签名（比如：查询数据并对此数据重新进行签名），使用新签名和请求头中的 If-None-Match进行对比：

   如果相等：返回 304，告诉浏览器此次请求可以使用缓存数据
   如果不相等：将新数据重新返回，并重新设置响应头 Eag 为新签名

6. 浏览器端就可以通过状态码是不是 304，从而决定是否使用缓存数据。

Last-Modified / If-Modified-Since

1. 浏览器通过请求访问服务端
2. 服务端主动设置请求返回的一个响应头为：Last-Modified
   Last-Modified: 此请求最后一次更新的时间
3. 浏览器拿到此响应头 Last-Modified后，将 Last-Modified和此请求的数据存储到本地
4. 浏览器发起下一次请求时，添加请求头：If-Modified-Since: Last-Modified

5. 服务端接收到此请求，通过某种方式得到新的资源最后修改时间，使用新的资源最后修改时间和请求头中的 If-Modified-Since进行对比：

   如果相等：返回 304，告诉浏览器此次请求可以使用缓存数据
   如果不相等：将新数据重新返回，并重新设置响应头 Last-Modified 为新的修改时间。

6. 浏览器端就可以通过状态码是不是 304，从而决定是否使用缓存数据。