目录
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.