解析强缓存与协商缓存

前言

在工作中,前端代码打包之后的静态需要部署到服务器上,这时就需要对一些静态资源做一些运维配置,其中缓存是必不可少的。

缓存的优点:

  • 减少了不必要的数据传输
  • 减轻了对服务器的压力,提升系统的性能
  • 加快了用户加载网页的速度
  • 提升了用户体验

缓存的缺点:

  • 无法保证缓存数据与数据库中的数据保持同步
  • 可能会出现缓存失效

一、强缓存

强缓存其实就是强制缓存的意思。当浏览器去请求某个文件的时候,服务端就在respone header里面对该文件做了缓存配置。缓存的时间、缓存类型都由服务端控制,具体表现为:
respone header 的cache-control,常见的设置是max-age public private no-cache no-store等
在这里插入图片描述
强制缓存主要取决于两个字段 Expires 和 Cache-Control 中的 max-age 字段, 在
在的情况下, 其流程如下图所示
请添加图片描述
由图可知,当强制缓存中的两个字段同时存在的时候,Cache-Control中的max-age优先级要高,只有当Cache-Control失效时才会校验Expires字段。

强缓存总结

  1. cache-control: max-age=xxxx,public
    max-age:表示缓存的时间(有效期)
    public:表示客户端和代理服务器都可以缓存该资源;但是,当用户重新刷新页面时,就会重新 发送请求,获取资源
  2. cache-control: max-age=xxxx,private
    private:表示只让客户端可以缓存该资源;代理服务器不缓存
  3. cache-control: max-age=xxxx,immutable
    immutable:表示即使用户重新刷新页面,也不会重新发送请求,还是直接读取缓存
  4. cache-control: no-cache
    no-cache:表示不走强制缓存,但可以走协商缓存
  5. cache-control: no-store
    no-store:表示不走缓存

二、协商缓存

当强制缓存时间过期后,这是客户端就会去请求服务器,在请求服务器的过程中可以设置协商缓存。
在这里插入图片描述

协商缓存主要由 ETag 和 Last-Modified 两个字段来实现

  • ETag 是一个用于映射 web 资源的映射 token,具有唯一性

  • Last-Modified 则通常是文件最后更新的日期时间戳

协商缓存的工作流程如下图所示:
请添加图片描述

  1. 浏览器首次向服务器请求数据时, 服务器正常返回数据,同时在响应头中放入 ETagLast-Modified 两个新字段
  2. 浏览器第二次向服务器请求数据时, 浏览器会自动地在请求头附上 If-None-MatchIf-Modified-Since 两个字段(分别对应的是 ETag 和 Last-Modified 的值,主要校验两者是否相等), 然后由服务器端进行校验, 校验通过的话(表明数据有效), 服务器会直接返回 状态码 304 ,且不携带响应体的报文段, 这相当于告诉浏览器:当前缓存有效, 可以直接使用! 校验失败则会和首次请求一样, 返回状态码为200且携带数据响应体的报文段, 同时这个响应头会带上新的ETag 和Last-Modified, 为下一次协商缓存做好铺垫

总结

  • 强制缓存发生在浏览器端, 协商缓存发生在服务器端
  • 强制缓存在浏览器强制刷新的情况下不会生效, 而协商缓存则不受影响。
  • 强制缓存返回的报文状态码为 200, 协商缓存返回的报文状态码为 304
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值