為提升用戶訪問體驗，縮短項目加載時間，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腳本加載運行。請參考以下操作步驟：

1. 代碼界面引用thing.cached.min.js文件封裝庫； 2. 第一次加載，緩存文件后綴為’glb’, ‘gltf’, ‘bin’, ‘json’, ‘jpg’, 'png’模型資源； 3. 再次的加載將優先從本地緩存文件里讀取，目前僅支持模型類的文件對象，后續會有擴展。
? ? ? 責任編輯:tzh