缓存位置
缓存位置分为4中,并且各自有优先级,当依次查找缓存且都没有命中的时候,才会去请求网络
Service Worker
- Service Worker是运行在浏览器背后的独立线程,一般可以用来实现缓存功能。
- 因为Service Worker中涉及到请求拦截,所以传输协议必须是HTTPS
- Service Worker的缓存与浏览器其他内建的缓存机制不同,它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存,并且缓存是持续性的。
- 当Service Worker没有命中缓存的时候,我们需要去调用fetch函数获取数据。即会根据缓存查找优先级去查找数据。但不管从Memory Cache中还是从网络请求中获取数据,浏览器都会显示我们是从Service Worker中获取内容。
- 在PWA中,离线消息推送等功能就是通过Service Worker来实现的
Service Worker实现缓存的步骤
- 注册Service Worker
- 监听到install时间以后就可以缓存需要的文件
- 下次用户访问的时候可以通过拦截请求的方式查询是否存在缓存,如果如在就直接读取缓存文件,否则就从服务器请求
Memory Cache
- Memory Cache表示内存中的缓存,主要包含当前页面中已经抓取的资源(css,js,图片等)。
- Memory读取内存中的数据比磁盘块,内存缓存读取虽然高效,但是持续性短,会随着进程的释放而释放(关闭tab页就释放内存缓存了)。
- 内存相对于硬盘很小,谷歌默认只能分配1.5G的堆内存。
- 内存中有一个很重要的缓存资源是preloader相关指令(例如:
<link ref="prefetch">
)下载的资源。preloader相关指令是页面优化常见的手段之一,它可以一边解析js/css文件,一边网络请求下个资源 - 注意:内存缓存在缓存资源时并不关心返回资源的HTTP缓存头Cache-Control是什么值,同时资源的匹配也并非仅仅是对URL做匹配,还会对Content-Type,CORS等其他特征做校验
Disk Cache
- Disk Cache就是存储在硬盘中的缓存,读取速度比内存缓存慢,但时效性比Memory高、容量很更大。
- 在所有浏览器缓存中,Disk Cache覆盖面最大,它会根据HTTP Header中的字段判断哪些资源需要缓存,哪些资源可以不请求直接使用,哪些资源已经过期需要重新请求。
关于内存缓存和磁盘缓存
- 一般大文件大概率不会放在内存中,反之优先
- 当系统内存使用率高的话,文件优先存储进硬盘
Push Cache
- Push Cache(推送缓存)是HTTP/2中的内容,当以上三种缓存都没有命中时,才会被使用。
- 它只会在会话(Session)中存在,一旦会话结束就被释放,并且缓存时间也很短暂,在Chrome浏览器中只有5分钟左右,同时也并非严格执行HTTP头重的缓存指令。
- 结论:
- 所有资源都能被推送,并且能够被缓存,但是Safari浏览器支持相对比较差
- 可以推送no-cache和no-store的资源
- 一旦连接被关闭,Push Cache就被释放
- 多个页面可以使用同一个HTTP/2的连接,也就可以使用同一个Push Cache。这主要还是依赖浏览器的实现而定,出于对性能的考虑,有的浏览器会对相同域名但不同的tab标签使用同一个HTTP连接
- Push Cache中的缓存只能被使用一次
- 浏览器可以拒绝接受已经存在的资源推送
- 可以给其他域名推送资源
缓存过程分析
- 浏览器第一次发起HTTP请求,在浏览器缓存中查看是否存在请求结果和缓存标识
- 如果没有就再次发起HTTP请求到服务器
- 服务器返回请求结果和缓存标识
- 将请求结果和缓存标识写入浏览器缓存
- 下一次请求时就判断请求结果和缓存标识是否命中了
结论分析
- 浏览器每次发起请求,都会先在浏览器缓存中查找该请求的结果以及缓存标识
- 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中