上图中只是常用的消息报头，下面来看下不同字段之间的关系和区别：
Cache-Control与Expires
Last-Modified与ETag
缓存位置
浏览器可以在内存、硬盘中开辟一个空间用于保存请求资源副本。我们经常调试时在DevTools Network里看到Memory Cache（內存缓存）和Disk Cache（硬盘缓存），指的就是缓存所在的位置。请求一个资源时，会按照优先级（Service Worker -> Memory Cache -> Disk Cache -> Push Cache）依次查找缓存，如果命中则使用缓存，否则发起请求。这里先介绍 Memory Cache 和 Disk Cache。
200 from memory cache
表示不访问服务器，直接从内存中读取缓存。因为缓存的资源保存在内存中，所以读取速度较快，但是关闭进程后，缓存资源也会随之销毁，一般来说，系统不会给内存分配较大的容量，因此内存缓存一般用于存储较小文件。同时内存缓存在有时效性要求的场景下也很有用（比如浏览器的隐私模式）。
200 from disk cache
表示不访问服务器，直接从硬盘中读取缓存。与内存相比js清除浏览器缓存，硬盘的读取速度相对较慢，但硬盘缓存持续的时间更长，关闭进程之后，缓存的资源仍然存在。由于硬盘的容量较大，因此一般用于存储大文件。
下图可清晰看出差别：
200 from prefetch cache
在preload或prefetch的资源加载时，两者也是均存储在http cache，当资源加载完成后，如果资源是可以被缓存的，那么其被存储在http cache中等待后续使用；如果资源不可被缓存，那么其在被使用前均存储在memory cache；
CDN Cache
以腾讯CDN为例X-Cache-Lookup:Hit From MemCache 表示命中CDN节点的内存X-Cache-Lookup:Hit From Disktank 表示命中CDN节点的磁盘X-Cache-Lookup:Hit From Upstream 表示没有命中CDN
整体流程
从上图能感受到整个流程，比如常见两种刷新场景：
其他Web缓存策略IndexDB
IndexedDB 就是浏览器提供的本地数据库，能够在客户端存储可观数量的结构化数据，并且在这些数据上使用索引进行高性能检索的API。异步 API 方法调用完后会立即返回，而不会阻塞调用线程。要异步访问数据库，要调用 window 对象 indexedDB 属性的open() 方法。该方法返回一个 IDBRequest 对象 (IDBOpenDBRequest)；异步操作通过在 IDBRequest 对象上触发事件来和调用程序进行通信。常用异步API如下：
在16年曾基于IndexDB做过一整套缓存策略，有不错的优化效果
Service Worker
SW从2014年提出的草案到现在已经发展很成熟了，基于SW做离线缓存，让用户能够进行离线体验，消息推送体验js清除浏览器缓存，离线缓存能力涉及到Cache和CacheStorage的概念，篇幅有限，不展开了
LocalStorage
localStorage 属性允许你访问一个 Document 源(origin)的对象 Storage 用于存储当前源的数据，除非用户人为清除(调用 localStorage api 或则清除浏览器数据)， 否则存储在 localStorage 的数据将被长期保留
SessionStorage
sessionStorage 属性允许你访问一个 session Storage 对象，用于存储当前会话的数据，存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
定义最优缓存策略结语
通过了解浏览器各种缓存机制和存储能力特点，结合业务制定合适的缓存策略，善用缓存是基本功，可以用于时常审查负责的业务，可能就会发现个别业务并没有运用到位，共勉。
参考资料
———END———
限 时 特 惠： 本站每日持续更新海量各大内部创业教程，一年会员只需98元，全站资源免费下载 点击查看详情
站 长 微 信： wxii2p22
admin
