强缓存与协商缓存

559 10 0 技术 2021-12-22

为什么要缓存?

当你访问过的一个页面,第二次在浏览器端打开时,明显速度会比第一次打开快。这是因为浏览器和服务端都使用的缓存机制,浏览器在和服务器频繁进行远程连接传输是十分消耗时间的,部分资源会被缓存起来,以备下次访问可以节省时间和资源流量。总结一下引用缓存机制的好处:

  • 提升浏览器端网页加载速度
  • 节省服务器资源消耗(如带宽、流量、计算压力)

强缓存

强缓存是针对浏览端的策略,在每次进行http请求的时候,服务器响应后会在返回包的响应头里面增加一个叫做 cache-control 的字段表示我这个请求的资源使用这个缓存策略。通俗来说就是服务器告诉浏览器,这个事情要听我的,以后再请求它,那么就要按照 cache-control 里面说的来做。

Snipaste_2021-11-26_10-35-56

cache-control字段的值可以有下面这些:

  • max-age=xxxx,public:表示公共资源,可以被所有设备缓存包括客户端和CDN等中间代理服务器,F5刷新后会清除。
  • max-age=xxxx,private:表示私人资源,只能够被客户端缓存,F5刷新后会清除。
  • max-age=xxxx,immutable:表示永久缓存,只要不手动清除浏览器缓存数据,那么在他的有效期内都缓存,F5刷新都不能清除。
  • no-cache:不设置任何强缓存,每次请求都访问服务器。
  • no-store:客户端和服务器两边都不缓存。

需要注意如果是命中了强缓存,那么浏览器中的状态码是200并且标识“from cache”或者“来自内存缓存”类似字样。

Snipaste_2021-11-26_10-50-54

协商缓存

协商缓存则是针对服务器的缓存策略,在http请求某个资源的时候在返回头上可以带有两个字段

微信截图_20211126105439

etag:类似于md5,是一个文件的哈希值(hash),标识文件的唯一性。

last-modified:是该文件的最后修改时间。

在下次请求中这两个字段会被带到请求头中,服务器首先会对比 etag 是否和要索取的资源一样,如果相同则返回状态码304表示资源未更改过;如果不同那么就接着判断 last-modified 时间是否一致,一致的话返回状态码304表示资源未更改过。浏览器收到302后就知道可以使用本地缓存了。

需要注意强缓存和协商缓存并不是相斥的,而是可以共存的,当浏览器发起请求时,先看能否命中强缓存策略,不行就发起一个真正的请求到服务器,服务器根据协商缓存策略判断能否使用浏览器缓存,不行就重新传输返回这个资源给浏览器。

© 2020 peal.cc 粤ICP备2020133024号