关于缓存

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

强制缓存规则的三种场景

  • 没有找到请求的缓存结果以及缓存标识(直接发起http请求)
  • 找到了请求的缓存结果以及缓存标识,但是显示已经失效(携带资源的缓存标识发起http请求—-协商缓存的过程)
  • 找到了请求的缓存结果和缓存标识,并且未失效,直接使用缓存中的结果

强制缓存的规则字段

按优先级

Cache-Control > Expires

Expires

Expires是HTTP/1.0中控制网页缓存的字段,值为服务器返回的请求结果缓存的到期时间,即再次发起请求时,客户端的时间如果小于Expires的值,就可以直接使用缓存。

缺点:客户端的时间是可以“灵活”改变的,你懂的~(不同时区,或者人为修改系统时间…)

Cache-Control

到了http/1.1,为了修复Expires的不可靠性,引入了Cache-Control的规则,他的值主要有:

  • public: 允许中间代理服务器和客户端缓存
  • private: 只允许客户端缓存不允许中间代理服务缓存(默认值)
  • no-store: 所有内容不允许缓存(强制缓存和协商缓存都不用)
  • no-catch: 客户端缓存内容,但是是否使用缓存需要经过协商缓存来验证
  • max-age=xxx: 缓存会在xxx秒之后失效

memory cache和disk cache

刷新页面的时候我们会看到有些资源是from memory cache 有些则是from disk cache,这两个分别代表的是内存缓存和硬盘缓存。

memory cache
  • 快速读取:内存缓存会将编译解析后的文件,直接存入该进程的内存中,占据该进程一定的内存资源,以方便下次运行使用时的快速读取
  • 时效性:一旦该进程关闭,则该进程的内存则会清空。
disk cache
  • 硬盘缓存(from disk cache):硬盘缓存则是直接将缓存写入硬盘文件中,读取缓存需要对该缓存存放的硬盘文件进行I/O操作,然后重新解析该缓存内容,读取复杂,速度比内存缓存慢

在浏览器中浏览器会在js和图片等文件解析执行后直接存入内存缓存中,而css文件则会存入硬盘文件中,所以每次刷新页面有些是从内存缓存中读取,而有些则是从硬盘中读取。

协商缓存

协商缓存就是强缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定是否可以使用缓存的过程。主要有两种情况

  • 协商缓存生效,返回304
  • 协商缓存失效,返回一个新的请求结果以及200状态码

控制协商缓存的头字段

Last-Modified/If-Modified-Since 和 Etag/If-None-Match

  • If-Modified-Since则是客户端再次发起该请求时,携带上次请求返回的Last-Modified值,通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。服务器收到该请求,发现请求头含有If-Modified-Since字段,则会根据If-Modified-Since的字段值与该资源在服务器的最后被修改时间做对比,若服务器的资源最后被修改时间大于If-Modified-Since的字段值,则重新返回资源,状态码为200;否则则返回304,代表资源无更新,可继续使用缓存文件.
  • Etag是服务器响应请求时,返回当前资源文件的一个唯一标识(由服务器生成)If-None-Match是客户端再次发起该请求时,携带上次请求返回的唯一标识Etag值,通过此字段值告诉服务器该资源上次请求返回的唯一标识值。服务器收到该请求后,发现该请求头中含有If-None-Match,则会根据If-None-Match的字段值与该资源在服务器的Etag值做对比,一致则返回304,代表资源无更新,继续使用缓存文件;不一致则重新返回资源文件,状态码为200.

Etag / If-None-Match优先级高于Last-Modified / If-Modified-Since,同时存在则只有Etag / If-None-Match生效。

总结

强制缓存优先于协商缓存进行,若强制缓存(Expires和Cache-Control)生效则直接使用缓存,若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match),协商缓存由服务器决定是否使用缓存,若协商缓存失效,那么代表该请求的缓存失效,重新获取请求结果,再存入浏览器缓存中;生效则返回304,继续使用缓存。