浏览器缓存的那些事

缓存位置

• service worker （可以实现自定义缓存，只能在https或者localhost下使用，不常用）
• memory cache
• disk cache
• push cache（http2.0）

缓存类型

强缓存优先级高于协商缓存（意思是先判断强缓存，如果强缓存结果是缓存，那么直接使用缓存，否则的话还要继续走协商缓存流程进一步判断，而不是直接忽略协商缓存）

1. 强缓存: 不向服务器发送请求，直接从mc或者dc取，控制台network里显示的请求结果还是200.

   cache-control优先级高于expires

   • 响应头字段Cache-Control（http1.1）
     • Cache-Control:max-age=300，代表请求响应后的300s内使用缓存。
   • 响应头字段Expires（http1.0）
     • Expires=max-age + 请求时间,结合Last-Modified确定是否过期。

2. 协商缓存：强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存，如果使用缓存则控制台network显示的请求结果是304.

   Etag优先级高于Last-Modified

   • 文件标识比较
     • 响应头字段Etag: string
     • 请求头字段If-None-Match: string
   • 时间戳比较
     • 响应头字段Last-Modified: timestamp
     • 请求头字段If-Modified-since: timestamp

注意：使用Cache-Control: no-cache并不意味着资源一定不使用缓存，这只是强缓存中设置了不使用缓存，还要看协商缓存的结果。

用户使用场景

1. 地址栏打开url，则从disk cache取结果（如果有的话）。
2. 当前页面f5普通刷新，则取缓存的顺序为memory->disk。
3. 当前页面f5强制刷新，则不使用缓存。