浏览器缓存

前端 寻梦 2年前 (2023-03-27) 2152次浏览 0个评论 扫描二维码
文章目录[隐藏]

强缓存

有缓存时,客户端直接从缓训中获取数据。没有时,从服务端取数据。
响应头中控制缓存的有两个字段pragma、Expires和Cache-Control

  • Expires
    到期时间(相对服务器来说)支持时间GTM格式(2020-08-04T16:00:00.000Z)。”Expires”: “2020-08-04T16:00:00.000Z”表示为该资源一直缓存到2020年8月4日16:00,过期之后直接向服务端重新请求数据。这种方式存在一个问题,客户端和服务端的时间可能会不一致
  • Cache-Control
    “Cache-Control”: “max-age=10”
    表示该资源有效缓存时间为10秒。Cache-Control在请求和响应头中都可以使用:具体请看文末
  • pragma
    pragma值有no-cache和no-store两个选项,表示意思同cache-control。”pragma”: “no-cache”,no-store:永远都不要在客户端存储资源,

三者同时出现时优先级顺序:pragma -> cache-control -> expires,同时出现Expires字段无效

协商缓存

协商缓存可以叫做对比缓存,请求时会带上资源标识符去到服务端进行比对,如果资源没有任何修改,则客户端直接缓存。
注意:协商缓存和强缓存的重要区别,强缓存下的客户端请求服务器接收不到,协商缓存下的客户端请求服务端时可以接受到只是做在服务端进行数据对比,判断资源是否更新;

协商缓存与强缓存的区别
强缓存都会访问本地缓存直接验证看是否过期,如果没过期直接使用本地缓存,并返回 200。但协商缓存本地缓存会被忽略,会去请求服务器验证资源是否更新,如果没更新才继续使用本地缓存,此时返回的是 304,这就是协商缓存。协商缓存主要包括 Last-Modified 和 Etag。

  • Last-Modified(最后修改时间)

Last-Modified表示为资源最后一次修改时间,服务端会通过增加Last-Modified响应头来作为缓存标识符, 通常取服务端资源修改的最后时间作为值。
客户端接受到请求之后下次发送请求,请求头会自动带上If-Modified-Since字段,值为之前服务端响应头中的Last-Modified的值。
服务端拿到请求头If-Modified-Since的值和当前资源最后修改时间Last-Modified进行比对:
会有以下两种情况
Last-Modified > If-Modified-Since:不是最新更改的数据,返回新的资源
Last-Modified = If-Modified-Since:是最新的,无需再从服务端响应,此时返回304,直接使用缓存。

  • Etag(文件唯一标识符)
    Etag会基于资源生成一串唯一表示符,只要内容不同唯一标识符就不同。启用 etag 之后,请求资源后的响应返回会增加一个 etag 字段,如下:Etag: “FllOiaIvA1f-ftHGziLgMIMVkVw_”,具体同上
指令参数请求报文中的作用响应报文中的作用
no-cache客户端提醒缓存服务器,在使用缓存前,不管缓存资源是否过期了,都必须进行校验客户端提醒缓存服务器,在使用缓存前,不管缓存资源是否过期了,都必须进行校验
max-age=[秒]如果缓存资源的缓存时间值小于指定的时间值,则客户端接收缓存资源(如果值为0,缓存服务器通常需要将请求转发给源服务器进行响应,不使用缓存)在指定时间内,缓存服务器不再对资源的有效性进行确认,可以使用
no-store暗示请求报文中可能含有机密信息,不可缓存暗示响应报文中可能含有机密信息,不可缓存
no-transform禁止代理改变实体主体的媒体类型(例如禁止代理压缩图片等)禁止代理改变实体主体的媒体类型(例如禁止代理压缩图片等)
cache-extension新指令标记(token),如果缓存服务器不能理解,则忽略新指令标记(token),如果缓存服务器不能理解,则忽略
max-stale(=[秒])提示缓存服务器,即使资源过期也接收;或者过期后的指定时间内,客户端也会接收
min-fresh=[秒]提示缓存服务器,如果资源在指定时间内还没过期,则返回
only-if-cached如果缓存服务器有缓存该资源,则返回,不需要确认有效性。否则返回504网关超时
public明确指明其他用户也可以使用缓存资源
private缓存服务器只给指定的用户返回缓存资源,对于其他用户不返回缓存资源
喜欢 (266)
[支付宝扫码,感谢支持]
分享 (0)
关于作者:

您必须 登录 才能发表评论!