浏览器的缓存机制

浏览器的缓存机制

缓存过程


浏览器与服务器通信的方式为应答模式, 即是:
浏览器发起HTTP请求-服务器响应请求, 那么浏览器怎么确定一个资源该不该请求缓存呢?
浏览器第一次向服务器发起该请求后拿到请求结果, 将请求结果和缓存标识存入浏览器缓存, 浏览器对于缓存的处理是根据第一次请求资源时返回的响应头来确定的

分为强制缓存和协商缓存

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

Cache-control优先级高于expires
Etag/If-None-Match优先级高于Last-Modified/If-Modified-Since

区别

  1. 强缓存不发请求, 直接在缓存中获取; 弱缓存需要发送一个请求, 验证是都可以使用缓存, 如果可以则返回304直接使用缓存, 如果不可以使用缓存, 则直接返回该资源的数据
  2. 强缓存返回200(from cache), 弱缓存返回304

强制缓存

不会向服务器请求资源, 直接从缓存中读取资源, 在chrome控制台的netWork选项中可以看到该请求返回200的状态码, size显示 from disk cache和from memory cache;

  • from disk cache 从硬盘中读取缓存;
  • from memory cache 从内存中读取缓存;浏览器会在js和图片资源等文件解析后直接存入内存缓存中, 那么当刷新页面时只需直接从内存缓存中读取(from memory cache);

协商缓存

协商缓存是无法减少请求数的开销的, 但是可以减少返回的正文大小;

用户行为对缓存的影响

1.地址栏访问, 链接跳转是正常用户的行为, 将会触发浏览器缓存机制
2.F5刷新, 浏览器会设置max-age=0, 跳过强制缓存判断, 会进行协商缓存判断
3.ctrl+F5刷新, 会跳过强制缓存和协商缓存, 直接从服务器拉取资源