浏览器强缓存、协商缓存

180 阅读3分钟

什么缓存?

当我们访问某个网站的时候,第一次请求之后浏览器就会对该网站保存下来。第二次访问的时候如果命中缓存就直接读取上一次保存好的资源。

缓存的好处?

  1. 缓解服务器压力
  2. 提高请求响应速度
  1. 减少带宽

浏览器的缓存过程:强缓存,协商缓存。

我们第一次进入页面,请求服务器,然后服务器进行应答,浏览器会根据 响应头 来判断是否对资源进行缓存,如果响应头中expires或者cache-control字段,代表这是强缓存,浏览器就会把资源缓存在memory cache 或 disk cache中。如果下一次请求命中缓存直接拿浏览器缓存资源,不会和服务器请求交互。如果不命中就会发送请求并且携带上一次的协商缓存标识给服务器是识别是否需要缓存,然后返回对应状态码304(可以使用上一次缓存)、200(全新资源)。

  1. memory cache:从运行内存中读取缓存
  2. disk cache:从磁盘中读取缓存

图中可以看出协商缓存是会发出请求给服务器,命中时不会返回响应内容。(内存读取速度比磁盘读取快)。下面来分析一下相关首部字段的信息

强缓存

catch-control

这是服务器指导客户端如何去执行的首部信息,其中属性为:

  • max-age

返回一个缓存时间,单位(s)max-age = 10缓存十秒

  • no-cache

标识该资源不被缓存,但是会进入协商缓存

  • no-store

不使用缓存

  • privite

资源只有客户端可以缓存

  • public

可以被浏览器和代理服务器缓存

expires

服务器返回该请求结果缓存的到期时间(值为一个时间戳),意思是,再次发送请求时,如果未超过过期时间,直接使用该缓存,如果过期了则重新请求。

有个缺点,就是它判断是否过期是用本地时间来判断的,本地时间是可以自己修改的。

权重: cache-control > expires

协商缓存

etag

文件资源标识,由内容生成对应标识,每次资源更改时服务器生成不同的Etag,webpack的hash值差不多。

if-none-match

请求头携带上一次的etag资源标识

last-modified

last-modified是服务器响应请求时,在响应头返回该资源文件在服务器最后被修改的时间。

If-Modified-Since

请求头携带上一次的修改时间(last-modifield),服务器进行对比修改时间是否一致,返回对应状态码。

有的文件或者数据可能是动态生成的,但是,文件内容可能并没有变,这个时间是变了的,那么就会造成一定会更新。

权重:Etag > Last-Modified

总结

以上就是个人对强缓存和协商缓存总结说明。