200 from memory cache
表示不访问服务器,直接从内存中读取缓存 。因为缓存的资源保存在内存中,所以读取速度较快,但是关闭进程后 , 缓存资源也会随之销毁,一般来说,系统不会给内存分配较大的容量,因此内存缓存一般用于存储较小文件 。同时内存缓存在有时效性要求的场景下也很有用(比如浏览器的隐私模式) 。
200 from disk cache
表示不访问服务器,直接从硬盘中读取缓存 。与内存相比,硬盘的读取速度相对较慢 , 但硬盘缓存持续的时间更长,关闭进程之后,缓存的资源仍然存在 。由于硬盘的容量较大,因此一般用于存储大文件 。
下图可清晰看出差别:
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 。
整体流程
从上图能感受到整个流程,比如常见两种刷新场景:
- 当 F5 刷新网页时 , 跳过强缓存,但是会检查协商缓存;
- 当 Ctrl + F5 强制刷新页面时,直接从服务器加载 , 跳过强缓存和协商缓存
异步 API 方法调用完后会立即返回,而不会阻塞调用线程 。要异步访问数据库,要调用 window 对象 indexedDB 属性的 open() 方法 。该方法返回一个 IDBRequest 对象 (IDBOpenDBRequest);异步操作通过在 IDBRequest 对象上触发事件来和调用程序进行通信 。
常用异步 API 如下:
在 16 年曾基于 IndexDB 做过一整套缓存策略,有不错的优化效果:
Service WorkerSW 从 2014 年提出的草案到现在已经发展很成熟了,基于 SW 做离线缓存,让用户能够进行离线体验 , 消息推送体验,离线缓存能力涉及到 Cache 和 CacheStorage 的概念,篇幅有限,不展开了 。
LocalStoragelocalStorage 属性允许你访问一个 Document 源(origin)的对象 Storage 用于存储当前源的数据,除非用户人为清除(调用 localStorage api 或者清除浏览器数据),否则存储在 localStorage 的数据将被长期保留 。
SessionStoragesessionStorage 属性允许你访问一个 session Storage 对象,用于存储当前会话的数据,存储在 sessionStorage 里面的数据在页面会话结束时会被清除 。页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话 。
定义最优缓存策略
- 使用一致的网址:如果您在不同的网址上提供相同的内容 , 将会多次获取和存储该内容 。注意:URL 区分大小写!
- 确定中继缓存可以缓存哪些资源:对所有用户的响应完全相同的资源很适合由 CDN 或其他中继缓存进行缓存;
推荐阅读
- 如何洗衣服上的墨水 怎么洗衣服的墨水
- 绥化律师咨询免费 绥化委托律师起诉如何收费
- 小学生叛逆不写作业怎么办 叛逆期孩子不写作业如何开导
- 微信里如何将聊天记录发给别人 微信如何把聊天记录发给别人
- 微信如何发聊天记录长图 微信如何发聊天记录
- 苹果手机如何清理内存垃圾,手把手教你哦 苹果手机如何清理内存
- 纸巾堵住了马桶如何自己快速疏通
- 商住两用房的房产税如要如何征收
- 如何看软尺的刻度 如何看软尺的刻度空白
- 双休日加班工资如何算