Yard


我们来聊一聊浏览器的缓存机制

1. 浏览器缓存两大策略

  1. 强缓存:不会向服务器发送请求,直接命中内存中的缓存资源,从chrome Network中可以看到资源200且from disk cache或from memory cache。
  2. 协商缓存:向服务器发送请求,服务器根据request header内的参数来判断是否需要更新此资源,如果不需要更新,服务器返回304的状态码,然后通知浏览器读取本地缓存。

2. 控制强缓存

强缓存主要由以下几个key决定。

http response header key description
Cache-Control http1.1最主要的key,指定缓存机制
Pragma http1.0指定缓存机制 当Pragma:no-cache时等同于Cache-Control:no-cache(在浏览器中disable cache就是在所有请求的请求头上加上Pragma:no-cache)
Expires http1.0指定缓存的过期时间,当和Cache-Control同时存在时优先取Cache-Control的值

强缓存示例

  1. Cache-Control内又有多个属性值,常见的是max-age,指定资源缓存的过期时间(s),例如:
    Cache-Control : max-age=300
    
    那么所有在300秒内的资源都将被强制缓存,也就是from disk cache或from memory cache。 超过300秒又会去重新请求服务器。
  2. Pragma一般用于调试,现在在response头上手动处理Pragma的很少很少。
  3. Expires和max-age类似,差别在于expires是一个固定的服务器时间点。

3. 控制协商缓存

控制协商缓存的主要是ETag和last-modified。

http response header key http request headerkey
ETag(服务端返回的当前资源的etag值) If-None-Match(上一次服务器对于当前资源返回的etag值)
Last-Modified(服务端返回的当前资源的最后修改时间) If-Modified-Since(上一次服务器对于当前资源返回的最后修改时间)

协商缓存示例

在请求服务器的时候,服务层会优先校对当前request的If-None-Match和If-Modified-Since,如果经过判断和之前的资源一致,那么服务端就会返回一个304,通知浏览器去缓存中读取该资源。