浏览器缓存

一句话解释浏览器缓存

浏览器缓存的好处,加载的时候把一些很少会变的静态资源保存到本地磁盘中,下次请求的时候直接从磁盘中读取数据,减轻了服务器压力,也加快了打开访问速度,增加用户的体验

缓存位置

  1. Service Worker

浏览器的独立线程,可以单独控制去缓存某些资源

  1. Memory Cache

读取写入速度快,但是缓存时间短

  1. Disk Cache

长期存储在硬盘中,可存储大容量资源

  1. Push Cache

自在会话(session)中存在,会话结束就会失效

缓存方式

强缓存

简介

浏览器在二次打开页面的时候,这时候回去根据响应头数据去看是否过期等,如果没有则直接拿本地的资源,返回状态码200

优先级

Cache-Control > Expires

关键字段

  1. Expires
    这是http1.o中控制网页缓存的字段,这里面返回了缓存资源的到期时间,但是由于客户端本地时间可以手动修改,这样就会导致强缓存失效,产生误差,现在基本上已经被http1.1的Cache-Control替代
  2. Cache-Control
    在http1.1中,Cache-Control主要控制网页的也谢缓存规则,拥有很多配置项
  3. public
    所有内容都会被缓存(客户端以及代理服务器)
  4. private
    只有客户端才能缓存(默认)
  5. no-cache
    不进行强缓存,直接走协商缓存
  6. no-store
    不进行缓存

max-age=xxx
xxx秒之后缓存失效

协商缓存

简介

协商缓存是在强缓存确定失效或者不设置强缓存的情况下,客户端去请求服务端看看服务端资源是否有更改,如果未更改这直接还是使用本地缓存,返回状态码304

关键字段
  1. Etag
    当你第一次请求资源的时候,浏览器会把这个资源的hash值传给你,相当于MD5,当你下次再请求的时候,请求头上会带上这个hash,不过字段变了,变成了If-None-Match
  2. Last Modified
    最后的修改时间,同Etag,这是第一次访问资源,在响应头里面会得到这个字段,下次去请求的这个资源的时候,会把这个值更换成 if-modified-since这个字段传给服务端
优先级

Etag>Last Modified

浏览器缓存.png

参考链接
https://juejin.cn/post/6847902216431337479#heading-2
https://juejin.cn/post/6844903763665240072

Last modification:March 10th, 2021 at 12:53 am
If you think my article is useful to you, please feel free to appreciate