浏览器缓存机制

50 阅读2分钟

概念

浏览器会将请求后的资源进行存贮离线资源,当下次需要该资源时,浏览器会根据缓存机制决定直接使用缓存资源还是再次向服务器发送请求

作用

1.减少了不必要数据的传输、降低服务器的压力

2.加快了客户端访问速度

3.增强用户体验

强缓存

不向服务端发送请求,强制使用缓存数据

实现方式 后端在响应头中返回 ExpiresCache-Control

Expires

http 协议 1.0 的字端

缓存过期时间,用来指定资源到期的时间,是服务器端的具体的时间点

浏览器:使用 expires 到期时间和本地时间进行对比,如果本地时间被修改或者和服务器时间差距较大,造成不准确的问题

1.jpg

Cache-Control

Cache-Control 是 HTTP 1.1 的字段

约定过期时间相对时间

当 cache-control 和 expires 同时存在 cache-control 的优先级会比 expires

当强缓存失效后,会使用协商缓存

2.png

协商缓存

协商缓存由服务器决定是否使用缓存

  1. 向服务器发送请求资源携带标识 Etag 字段:表示请求资源在服务器的唯一标识,浏览器可以根据 ETag 值缓存数据,下次请求的时候以 If-None-Match 字段请求Last-Modified 字段:用于标记请求资源的最后一次修改时间
  2. 服务器会进行判断浏览器缓存的资源是否真的失效是否更新真的失效,服务端已经更新,返回 200,重新返回最新资源缓存标识浏览器再次存入缓存后续再次从强缓存开始
  3. 缓存时间到了,但是资源没更新,就还使用本地的 直接返回 304

3.png

希望您能给我一个点赞,这是对我最大的鼓励