Skip to main content

浏览器缓存

强缓存（本地缓存）​

note

浏览器本地在有效时间内强制缓存

涉及到的请求头字段：Cache-Control 和 Expires

Expires​

服务端通过设置响应头的Exprires字段指定缓存过期时间，在过期时间之前重复请求无需再访问服务器。 expires

Cache-Control​

服务端通过响应头设置cache-control和max-age,告诉浏览器数据的缓存时间，在缓存有效时间内不用再次请求。

cache-control

Cache-Control: public,max-age=10
Expires: Thu,13 Jul 2023 17:58:58 GMT

协商缓存 （弱缓存）​

note

和服务器沟通，由服务器告知浏览器是否使用缓存

涉及到的请求头字段：LastModified/If-Modified-Since 和 ETag/If-None-Match

Last-Modified​

Last-Modified需要搭配 If-Modified-Since使用。首次请求时服务器将Last-Modified作为响应头返回给浏览器，浏览器缓存数据和last-modified数据， 下次请求的时候，带上if-modified-since请求头字段.

Last-Modified

Etag​

Etag需要搭配If-None-Match使用，在首次请求时服务器会把数据结果签名缓存在服务端，并设置在响应头Etag中返回给浏览器，浏览器这边则需要保存 Etag的值，并在下次请求的时候带在If-None-Match的请求头中，服务器端收到请求后判断Etag和If-None-Match是否相等，如果相等意味着结果没有改变，返回304，浏览器使用本地缓存， 如果不等服务器返回新的数据和新的Etag。

Etag

caution

在http协议里没有明确规定 强缓存 和 弱缓存 的概念，这只是开发者为了方便理解构造出来的概念。