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

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，通知浏览器去缓存中读取该资源。