Skip to content

Latest commit

 

History

History

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 

简述浏览器缓存读取规则

浏览器缓存可以优化性能,比如直接使用缓存而不发起请求,或者发起了请求但后端存储的数据和前端一致,则使用缓存从而减少响应数据。

缓存位置

Service Worker

Service Worker 是运行在浏览器背后的独立线程,一般可以用来实现缓存功能。使用 Service Worker 的话,传输协议必须为 HTTPSService Worker 的缓存与浏览器其他内建的缓存机制不同,它可以让我们自由缓存哪些文件、如何匹配缓存、如何读取缓存,而缓存是可持续性的。Service Worker 也是 PWA 的核心技术。

Memory Cache

Memory Cache 也就是内存中的缓存,主要包含的是当前页面中已经抓取到的资源,例如页面上已经下载的样式、脚本、图片等。读取内存中的数据很高效,但是缓存持续性很短,会随着进程的释放而释放。一旦我们关闭 Tab 页面,内存中的缓存也就被释放了。

Disk Cache

Disk Cache 也就是存储在硬盘中的缓存,读取速度慢点,但是什么都能存储到磁盘中,比之 Memory Cache 胜在容量和存储时效性上。

在所有浏览器缓存中,Disk Cache 覆盖面基本上是最大的。它会根据 HTTP Header 中的字段判断哪些资源需要缓存,哪些资源可以不请求直接使用,哪些资源已经过期需要重新请求。并且即使在跨站点的情况下,相同地址的资源一旦被硬盘缓存下来,就不会再次去请求数据。绝大部分的缓存都来自 Disk Cache

Push Cache

Push Cache(推送缓存)是 HTTP/2 中的内容,当以上三种缓存都没有命中时,它才会被时候用。它只在会话(Session)中存在,一旦会话结束就被释放,并且缓存时间也很短暂(大约 5 分钟)。

缓存过程分析

浏览器与服务器通信的方式为应答模式,即是:浏览器发起 HTTP 请求 - 服务器响应该请求。浏览器第一次向服务器发起该请求后拿到请求结果后,将请求结果和缓存表示存入浏览器缓存,浏览器对于缓存的处理是根据第一次请求资源返回的响应头来确定的。

  • 浏览器每次发起请求,都会先在浏览器缓存中查找该请求的结果以及缓存标识;
  • 浏览器每次拿到返回的请求结果都会将该结果和缓存表示存入浏览器缓存中;