ie如何清除浏览器缓存 ie清除浏览器缓存( 三 )


200 from memory cache
表示不访问服务器,直接从内存中读取缓存 。因为缓存的资源保存在内存中,所以读取速度较快,但是关闭进程后 , 缓存资源也会随之销毁,一般来说,系统不会给内存分配较大的容量,因此内存缓存一般用于存储较小文件 。同时内存缓存在有时效性要求的场景下也很有用(比如浏览器的隐私模式) 。
200 from disk cache
表示不访问服务器,直接从硬盘中读取缓存 。与内存相比,硬盘的读取速度相对较慢 , 但硬盘缓存持续的时间更长,关闭进程之后,缓存的资源仍然存在 。由于硬盘的容量较大,因此一般用于存储大文件 。
下图可清晰看出差别:

ie如何清除浏览器缓存 ie清除浏览器缓存


200 from prefetch cache
在 preload 或 prefetch 的资源加载时 , 两者也是均存储在 http cache,当资源加载完成后,如果资源是可以被缓存的,那么其被存储在 http cache 中等待后续使用;如果资源不可被缓存 , 那么其在被使用前均存储在 memory cache 。
ie如何清除浏览器缓存 ie清除浏览器缓存


CDN Cache
以腾讯 CDN 为例:X-Cache-Lookup:Hit From MemCache 表示命中 CDN 节点的内存;X-Cache-Lookup:Hit From Disktank 表示命中 CDN 节点的磁盘;X-Cache-Lookup:Hit From Upstream 表示没有命中 CDN 。
ie如何清除浏览器缓存 ie清除浏览器缓存


整体流程
ie如何清除浏览器缓存 ie清除浏览器缓存


从上图能感受到整个流程,比如常见两种刷新场景:
  • 当 F5 刷新网页时 , 跳过强缓存,但是会检查协商缓存;
  • 当 Ctrl + F5 强制刷新页面时,直接从服务器加载 , 跳过强缓存和协商缓存
其他 Web 缓存策略IndexDBIndexedDB 就是浏览器提供的本地数据库,能够在客户端存储可观数量的结构化数据,并且在这些数据上使用索引进行高性能检索的 API 。
异步 API 方法调用完后会立即返回,而不会阻塞调用线程 。要异步访问数据库,要调用 window 对象 indexedDB 属性的 open() 方法 。该方法返回一个 IDBRequest 对象 (IDBOpenDBRequest);异步操作通过在 IDBRequest 对象上触发事件来和调用程序进行通信 。
常用异步 API 如下:
ie如何清除浏览器缓存 ie清除浏览器缓存


在 16 年曾基于 IndexDB 做过一整套缓存策略,有不错的优化效果:
ie如何清除浏览器缓存 ie清除浏览器缓存


Service WorkerSW 从 2014 年提出的草案到现在已经发展很成熟了,基于 SW 做离线缓存,让用户能够进行离线体验 , 消息推送体验,离线缓存能力涉及到 Cache 和 CacheStorage 的概念,篇幅有限,不展开了 。
LocalStoragelocalStorage 属性允许你访问一个 Document 源(origin)的对象 Storage 用于存储当前源的数据,除非用户人为清除(调用 localStorage api 或者清除浏览器数据),否则存储在 localStorage 的数据将被长期保留 。
SessionStoragesessionStorage 属性允许你访问一个 session Storage 对象,用于存储当前会话的数据,存储在 sessionStorage 里面的数据在页面会话结束时会被清除 。页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话 。
定义最优缓存策略