浏览器缓存机制

147 阅读3分钟

浏览器每次发起请求,都会先在浏览器缓存中查找该请求的结果以及缓存的标识。

浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中。

浏览器缓存过程:

image.png

  • 不存在该缓存结果和缓存标识,强制缓存失效,则直接向服务器发起请求(跟第一次发起请求一致)

  • 存在该缓存结果和缓存标识,但是结果已经失效,强制缓存失效,则使用协商缓存(暂不分析)

  • 存在该缓存结果和缓存标识,且该结果没有还没有失效,强制缓存生效,直接返回该结果

控制强制缓存的字段: Cache-Control 和 Expires

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

HTTP/1.1 中Expires 被Cache-Control替代,原因在于Expires控制缓存的原理是使用客户端的时间与服务端返回的时间做对比,那么如果客户端与服务端的时间因为某些原因(例如时区不同;客户端和服务端有一方的时间不准确)发生误差,那么强制缓存则会失效。

cache-contorl 主要取值为:

  • public: 所有内容都将被缓存(客户端和代理服务器都可以缓存)
  • private: 所有内容只有客户端可以缓存,cache-control的默认取值
  • no-cache: 客户端缓存内容,但是是否使用缓存则需要经过协商缓存来验证决定
  • no-store: 所有内容都不会被缓存,即不使用强制缓存,也不实用协商缓存
  • max-age=xxx (xxx is numeric): 混存内容将在xxx秒后失效

内存缓存和硬盘缓存

内存缓存(from memory cache) : 具有两个特点,快速读取和时效性

快速读取: 内存缓存会将编译解析后的文件,直接存入该进程的内存中,占据该进程一定的内存资源,以方便下次运行使用时的快速读取。

时效性: 一旦该进程关闭,则该进程的内存会清空。

硬盘缓存 (from disk cache) : 直接将缓存写入硬盘文件中,读取缓存需要对该缓存存放的硬盘文件进行I/O 操作,然后重新解析该缓存内容,读取复杂,速度比内存缓存慢。

在浏览器中,浏览器会在js和图片等文件解析执行后直接存入内存缓存中,那么当刷新页面时只需要直接从内存缓存中读取,而css文件则会存入硬盘文件中,所以每次渲染页面都需要从硬盘中读取缓存。

协商缓存: 协商缓存是在强制缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定是否使用缓存的过程。

协商缓存生效,返回304

协商缓存失效,返回200和请求结果