浏览器缓存机制的关键:

  • 浏览器每次发起请求,都会先在浏览器缓存中查找该请求的结果以及缓存标识
  • 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

缓存分为两个过程:强制缓存和协商缓存。发送请求的时候先进行强制缓存,如果强制缓存失效,则进行协商缓存。

强制缓存

强制缓存的过程有三种情况:

  • 不存在缓存,第一次发起请求,直接向服务器发起请求
  • 存在缓存,缓存未失效,强制缓存生效,直接返回结果
  • 存在缓存,缓存失效,进行协商缓存

缓存规则:

浏览器向服务器发起请求时,服务器将缓存规则放进响应报文中的http响应头里与请求结果一起返回给浏览器,控制强制缓存的字段有两个:

  • Expires(HTTP/1.0)
  • cache-control(HTTP/1.1,优先级高)

Expires值为服务器返回该请求结果缓存的到期时间,cache-control的值有下面这些:

  • public:所有内容都缓存,包括客户端浏览器端
  • private:默认取值,只有客户端可以缓存(可以通过public和private区分客户端上的缓存和代理上的缓存)
  • no-store:不可以缓存
  • no-cache: 可以缓存,但使用前必须要去服务器验证是否过期,是否是最新版(即协商缓存来验证)
  • max-age:生存时间,max-age=xxx,缓存在xxx秒后失效
  • must-revalidate:如果缓存不过期就可以继续使用,但过期了如果还想用就必须去服务器验证(注意no-cache是使用前,这个是过期后)

缓存存放位置:

  • from memory cache
  • from disk cache

读取缓存的顺序为memory –> disk,js和图片等文件解析执行后直接存入内存缓存中,那么当刷新页面时只需直接从内存缓存中读取(from memory cache);而css文件则会存入硬盘文件中,所以每次渲染页面都需要从硬盘读取缓存(from disk cache)

协商缓存

强制缓存失效后,就会进行协商缓存,浏览器将缓存标识向服务器发起请求,服务器根据缓存标识决定是否使用缓存,有两种情况:

  • 返回304not modified,协商缓存生效,从浏览器读取缓存
  • 返回200,协商缓存失效,获取更新资源,保存在浏览器

缓存规则:

  • Last-modified(服务器返回)/If-Modified-Since(浏览器发送上一次请求返回的Last-modified)
  • Etag(服务器返回)/ If-None-Match(浏览器发送上一次请求返回的Etag)(优先级高)

参考链接: https://juejin.im/entry/5ad86c16f265da505a77dca4