前言
网络异常，图片无法展示
|
浏览器缓存机制按照缓存位置可以划分为：
- Memory Cache
- Service Worker Cache
- Disk Cache
- Push Cache
Memory Cache
什么资源会被存到内存里？对此没有特定的规则。但一般来讲，浏览器秉承的是“节约原则”。
比如，Base64 格式的图片，基本是在 memory cache里；
此外，体积不大的 JS、CSS 文件，也有较大地被写入内存的几率，而较大的 JS、CSS 文件往往被直接甩进磁盘。
Service Worker Cache
Service Worker
Service Worker 是一种独立于主线程之外的 Javascript 线程。脱离于浏览器窗体，因此无法直接访问 DOM。
这样独立的个性使得 Service Worker 的“个人行为”无法干扰页面的性能，这个“幕后工作者”可以帮我们实现离线缓存、消息推送和网络代理等功能。
借助 Service worker 实现的离线缓存就称为 Service Worker Cache。
PWA（Progressive Web Apps）
网页离线可用的原理：监听fetch事件拦截网络请求并从缓存中获取资源。
Service Worker 在传统网页中的使用也正是渐进增强手段的体现，使用PWA方案能够在一定程度上优化交互体验，比如twitter使用了PWA方案之后，用户驻留数据得到极大提升。
HTTP Cache
Push Cache
略
缓存的获取顺序
内存缓存>磁盘缓存>网络请求（http缓存）
缓存存储优先级
网络异常，图片无法展示
|
- base64的图片：内存缓存
- CSS资源：磁盘缓存（CSS文件加载一次就可渲染出来，不会频繁读取它，所以不适合缓存到内存里）
- JS文件或图片资源（非base64）：取决于加载的时间
- 其他：大部分放在磁盘中
