http缓存控制

浏览器缓存控制分为强缓存和协商缓存,协商缓存必须配合强缓存使用。 首先浏览器第一次跟一个服务器请求一个资源, 服务器在返回这个资源和response header的同时, 会根据开发者要求或者浏览器默认,在response的header加上相关字段的http response header。

1、强缓存和协商缓存

浏览器缓存控制分为强缓存和协商缓存,协商缓存必须配合强缓存使用。 首先浏览器第一次跟一个服务器请求一个资源, 服务器在返回这个资源和response header的同时, 会根据开发者要求或者浏览器默认,在response的header加上相关字段的http response header。

浏览器在请求已经访问过的URL时,会判断是否使用缓存,判断是否使用缓存主要是判断缓存是否在有效期内。

1.1、当浏览器对某个资源的请求命中了强缓存时,利用[Expires]或者[Cache-Control]这两个http response header实现

  • [Expires]描述的是一个绝对时间,依据的是客户端的时间, 用GMT格式的字符串表示,如Expires:Thu,31 Dec 2037 23:55:55 GMT, 下次浏览器再次请求同一资源时,会先从客户端缓存中查找, 找到这个资源后拿出它的[Expires]与当前时间做比较, 如果请求时间在[Expires]规定的有效期内就能命中缓存, 这样就不用再次到服务器上去缓存一遍,节省了资源。 但正因为是绝对时间,如果客户端的时间被随意篡改, 这个机制就实效了,所以我们需要[Cache-Control]。
  • [Cache-Control]描述的是一个相对时间,在进行缓存命中时都是利用浏览器时间判断。 [Expires]和[Cache-Control]这两个header可以只启用一个, 也可以同时启用,同时启用时[Cache-Control]优先级高于[Expires]。

1.2、当浏览器对某个资源的请求没有命中强缓存(即缓存过期后),就会发起一个请求到服务器, 验证协商缓存是否命中(即验证缓存是否有更新,虽然有效期过了,但我还能继续使用它吗?), 如果命中则还是从客户端中加载。 协商缓存利用的是[Last-Modified,If-Modified-Since]和[ETag,If-None-Match]这两对header来管理的。

  • [Last-Modified,If-Modified-Since]:原理和上面的[Expires]相同,服务器会响应一个Last-Modified字段,表示最近一次修改缓存的时间, 当缓存过期后, 浏览器就会把这个时间放在If-Modified-Since去请求服务器,判断缓存是否有更新。 区别是它是根据服务器时间返回的header来判断缓存是否存在, 但有时候也会出现服务器上资源有变化但修改时间没有变化的情况, 这种情况我们就需要[ETag,If-None-Match]。
  • [ETag,If-None-Match]:原理与上面相同,区别是浏览器向服务器请求一个资源, 服务器在返回这个资源的同时,在response的header中加上一个Etag字段, 这个字段是服务器根据当前请求的资源生成的唯一标识字符串, 只有资源有变化这个串就会发生改动。 当缓存过期后,浏览器会把这个字符串放在If-None-Match去请求服务器, 比较字符串的值判断是否有更新, Etag的优先级比Last-Modified的更高, Etag的出现是为了解决一个缓存文件在短时间内被多次修改的问题,因为Last-Modified只能精确到秒
  • [ETag,If-None-Match]这么厉害我们为什么还需要[Last-Modified,If-Modified-Since]呢? 有一个例子就是,分布式系统尽量关掉ETag,因为每台机器生成的ETag不一样,[Last-Modified,If-Modified-Since]和[ETag,If-None-Match]一般都是同时启用。

2、304 Not Modified

The HTTP 304 Not Modified client redirection response code indicates that there is no need to retransmit the requested resources. It is an implicit redirection to a cached resource. This happens when the request method is safe, like a GET or a HEAD request, or when the request is conditional and uses a If-None-Match or a If-Modified-Since header.

The equivalent 200 OK response would have included the headers Cache-Control, Content-Location, Date, ETag, Expires, and Vary.

Many developer tools’ network panels of browsers create extraneous requests leading to 304 responses, so that access to the local cache is visible to developers.

参考

Was this helpful?

0 / 0

发表评论 0

Your email address will not be published. Required fields are marked *