标签：IndexedDB 缓存 ThingJS 本地 3D 加载
- 本地缓存技术提升用户访问体验
- IndexedDB（客户端缓存持久化）技术优势
- 大型3D项目本地缓存技术实测
简介：为提升用户访问体验，缩短项目加载时间，ThingJS平台推出3D场景本地缓存技术：IndexedDB，也称客户端缓存持久化技术。通俗来说，IndexedDB就是浏览器提供的本地数据库，它可以被网页脚本创建和操作，使用JSON数据格式。下面详细介绍IndexedDB本地缓存技术，作为一种浏览器数据存储方案，对场景项目开发有极大的意义。
① 本地缓存技术提升用户访问体验
ThingJS平台支持在线开发面向物联网的3D可视化项目，当用户初次访问项目文件时，需先将3D模型数据缓存到本地，由用户访问设备进行3D渲染。若项目模型文件过大，导致加载时间长，势必影响用户访问体验，该如何访问降低速度，提升用户体验呢？
为缩短场景项目加载时间，ThingJS平台推出3D场景本地缓存技术：IndexedDB，即客户端持久化数据库！若你的项目使用本缓存技术，在初次访问后，3D场景中的文件级别数据将写入访问设备本地缓存数据库，在客户端实现永久的生命周期，清除浏览器缓存也不影响已缓存的3D模型文件。
② IndexedDB（客户端缓存持久化）技术优势
本地浏览器拥有三种永久存储数据技术，分别为Web Storage、IndexedDB、Web SQL。IndexedDB具备查询高效、存储空间大和异步操作等技术特征，有巨大的优势。
查询高效。IndexedDB是一种轻量级NOSQL数据库，是由浏览器自带。相比Web Sql更加高效，包括索引、事务处理和查询功能。
存储空间大。IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。在HTML5本地存储中，IndexedDB存储的数据则是最多的。
异步操作。 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。
与此同时，IndexedDB 内部采用对象仓库存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象，满足ThingJS在线平台的数据存储需求。
③ 大型3D项目本地缓存技术实测
大型3D场景项目结构复杂，对精度要求高，容易产生大量数据读取。ThingJS推出3D场景本地（客户端）缓存持久化技术，目的是降低数据传输压力，大大提高大型场景项目开发体验。
请注意，ThingJS平台任何场景加载首次需常规读取，第二次打开将执行本地缓存命令。即用户再次访问此项目时，省略3D模型缓存过程，直接由访问设备渲染3D模型，加载因此速度得以大幅提升，具体性能取决于电脑网络速度或开发综合环境，欢迎体验。
据实测，大型3D项目加载速度普遍可提升3倍以上，部分超大型项目加载速度可提升至10倍。
如上图某场景，首次加载至少需要62秒，启用本地缓存功能之后，大型3D场景加载仅用19秒，性能提速62%
本地缓存技术具体由thing.cached.min.js库封装，直接调用JavaScript脚本加载运行。请参考以下操作步骤：
- 代码界面引用thing.cached.min.js文件封装库；
- 第一次加载，缓存文件后缀为’glb’, ‘gltf’, ‘bin’, ‘json’, ‘jpg’, 'png’模型资源；
- 再次的加载将优先从本地缓存文件里读取，目前仅支持模型类的文件对象，后续会有扩展。
相关示例进入ThingJS在线开发平台查看：
http://www.thingjs.com/guide/?m=sample
标签：IndexedDB,缓存,ThingJS,本地,3D,加载 来源： https://blog.51cto.com/14889890/2657657
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。