1）浏览器缓存

发布于 2022年 04月 11日 22:47

浏览器缓存有哪些？

  • 强缓存：当我们访问URL的时候，不会向服务器发送请求，直接从缓存中读取资源,但是会返回200的状态码
  • 协商缓存:
  • 缓存位置：Service Worker --> Memory Cache --> Disk Cache -->Push Cashe

1 强缓存

如何设置强缓存？

1） 当我们第一次进入页面，请求服务器, 浏览器会根据respone header来判断是否对资源进行缓存，如果响应头中存在expires,pragma或者cache-control字段，代表强缓存，会将资源缓存在memory cache或disk cache中。

2） 第二次请求时,浏览器判断请求参数，如果符合缓存条件直接返回状态码200,从本地缓存中拿数据。否则把响应参数存在request 请求头中看是否符合协商缓存，符合返回状态码304，不服合返回全新资源

相关请求头

  • expires:是http1.0控制网页缓存的字段,值是一个时间戳,格林尼治时间。缺点：判断是否过期是用本地时间来判断的

  • Cache-Contral:是http1.1 中控制网页缓存的字段，Cache-contral 优先级比较高

  1. private:浏览器可以缓存，中间代理服务器不能缓存
  2. no-cache:跳过当前的强缓存，发送http请求,直接进协商缓存阶段
  3. no-store:不进行任何形式的缓存
  4. s-maxage：和max-age很像,但是区别在与s-maxages是针对代理服务器的缓存时间

2协商缓存

什么是协商缓存?

  • last-modify/if-modify-since

1）浏览器第一次请求一个资源的时候，服务器返回的header中会加上Last-Modify,last-Modify是一个时间标识该资源的最后修改时时间，

2）浏览器再次请求该资源时，request的请求头中会包含if-modify-since,该值为缓存之前返回的Last-Modify。服务器收到if-modify-since后根据资源最后修改时间判断是否命中

  • ETag/if-None-Match

与last-Modify/if-Modify-Since不同的是，Etag/if-none-match返回的是一个校验码。Etag可以保证每一个资源是唯一的，资源的变化都会导致ETag变化。服务器根据浏览器上送的if-None-Match值来判断是否命中缓存

推荐文章