IndexDB

IndexedDB 简单的说就是一个运行在浏览器的本地数据库,允许网页在用户的浏览器中存储结构化数据,并且可以高效地进行检索、查询和修改。并且不像传统的 cookie 或 localStorage 只能存储有限的数据量,IndexedDB 能够存储大量数据。

在这里插入图片描述

在 Cesium 中使用 IndexDB 缓存数据

很多厂商都已经利用这项技术提高了 Cesium 第二次加载的速度(对于网络服务响应较慢的数据会有比较明显的提升)。

GitHub 上有相关闭源插件可以用CesiumOfflineCacheCesiumNetworkPlug

但是上面两个库只提供了压缩之后的包,虽然可以直接绕过日期的许可直接使用

这里还是本着会做才是自己的想法,尝试模仿着写了一个。

原理

Cesium 几乎所有的数据都是通过 Cesium.Resource 请求回来的。因此我们只需要将请求回来的数据存储到 IndexDB 中,并且下次请求之前,先尝试从 IndexDB 中获取,如果获取得到,就用 IndexDB 的数据,如果不行才发起请求。

localForage

localForage 是一个简单的操作浏览器数据库的库,它有一个优雅降级策略,若浏览器不支持 IndexedDB 或 WebSQL,则使用 localStorage。在所有主流浏览器中都可用:Chrome,Firefox,IE 和 Safari(包括 Safari Mobile)。

CesiumNetworkPlug 的 README.md 中有提到使用了这个库,所以这里也用这个来实现。

具体实现

实现起来其实并不复杂。

首先利用 localForage 打开/创建一个 IndexDB 数据库,用于存储请求回来的数据。

然后修改 Cesium.Resource 的对应方法(修改源码或者直接替换对应方法的实现),添加如下操作即可。

在这里插入图片描述

实际效果

Cesium 用 IndexDB 缓存优化二次加载效率

原文链接

Cesium中使用IndexDB缓存数据

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐