為提升用戶(hù)訪問(wèn)體驗(yàn)，縮短項(xiàng)目加載時(shí)間，ThingJS平臺(tái)推出3D場(chǎng)景本地緩存技術(shù)：IndexedDB，也稱(chēng)客戶(hù)端緩存持久化技術(shù)。通俗來(lái)說(shuō)，IndexedDB 就是瀏覽器提供的本地?cái)?shù)據(jù)庫(kù)，它可以被網(wǎng)頁(yè)腳本創(chuàng)建和操作，使用JSON數(shù)據(jù)格式。下面詳細(xì)介紹IndexedDB本地緩存技術(shù)，作為一種瀏覽器數(shù)據(jù)存儲(chǔ)方案，對(duì)場(chǎng)景項(xiàng)目開(kāi)發(fā)有極大的意義。

① ?本地緩存技術(shù)提升用戶(hù)訪問(wèn)體驗(yàn)

ThingJS平臺(tái)支持在線開(kāi)發(fā)面向物聯(lián)網(wǎng)的3D可視化項(xiàng)目，當(dāng)用戶(hù)初次訪問(wèn)項(xiàng)目文件時(shí)，需先將3D模型數(shù)據(jù)緩存到本地，由用戶(hù)訪問(wèn)設(shè)備進(jìn)行3D渲染。若項(xiàng)目模型文件過(guò)大，導(dǎo)致加載時(shí)間長(zhǎng)，勢(shì)必影響用戶(hù)訪問(wèn)體驗(yàn)，該如何訪問(wèn)降低速度，提升用戶(hù)體驗(yàn)?zāi)兀?/p>

為縮短場(chǎng)景項(xiàng)目加載時(shí)間，ThingJS平臺(tái)推出3D場(chǎng)景本地緩存技術(shù)：IndexedDB，即客戶(hù)端持久化數(shù)據(jù)庫(kù)！若你的項(xiàng)目使用本緩存技術(shù)，在初次訪問(wèn)后，3D場(chǎng)景中的文件級(jí)別數(shù)據(jù)將寫(xiě)入訪問(wèn)設(shè)備本地緩存數(shù)據(jù)庫(kù)，在客戶(hù)端實(shí)現(xiàn)永久的生命周期，清除瀏覽器緩存也不影響已緩存的3D模型文件。

② ?IndexedDB（客戶(hù)端緩存持久化）技術(shù)優(yōu)勢(shì)

本地瀏覽器擁有三種永久存儲(chǔ)數(shù)據(jù)技術(shù)，分別為Web Storage、IndexedDB、Web SQL。IndexedDB具備查詢(xún)高效、存儲(chǔ)空間大和異步操作等技術(shù)特征，有巨大的優(yōu)勢(shì)。

查詢(xún)高效。IndexedDB是一種輕量級(jí)NOSQL數(shù)據(jù)庫(kù)，是由瀏覽器自帶。相比Web Sql更加高效，包括索引、事務(wù)處理和查詢(xún)功能。

存儲(chǔ)空間大。IndexedDB 的儲(chǔ)存空間比 LocalStorage 大得多，一般來(lái)說(shuō)不少于 250MB，甚至沒(méi)有上限。在HTML5本地存儲(chǔ)中，IndexedDB存儲(chǔ)的數(shù)據(jù)則是最多的。

異步操作。 IndexedDB 操作時(shí)不會(huì)鎖死瀏覽器，用戶(hù)依然可以進(jìn)行其他操作，這與 LocalStorage 形成對(duì)比，后者的操作是同步的。異步設(shè)計(jì)是為了防止大量數(shù)據(jù)的讀寫(xiě)，拖慢網(wǎng)頁(yè)的表現(xiàn)。

與此同時(shí)，IndexedDB 內(nèi)部采用對(duì)象倉(cāng)庫(kù)存放數(shù)據(jù)。所有類(lèi)型的數(shù)據(jù)都可以直接存入，包括 JavaScript 對(duì)象，滿(mǎn)足ThingJS在線平臺(tái)的數(shù)據(jù)存儲(chǔ)需求。

③ 大型3D項(xiàng)目本地緩存技術(shù)實(shí)測(cè)

大型3D場(chǎng)景項(xiàng)目結(jié)構(gòu)復(fù)雜，對(duì)精度要求高，容易產(chǎn)生大量數(shù)據(jù)讀取。ThingJS推出3D場(chǎng)景本地（客戶(hù)端）緩存持久化技術(shù)，目的是降低數(shù)據(jù)傳輸壓力，大大提高大型場(chǎng)景項(xiàng)目開(kāi)發(fā)體驗(yàn)。

請(qǐng)注意，ThingJS平臺(tái)任何場(chǎng)景加載首次需常規(guī)讀取，第二次打開(kāi)將執(zhí)行本地緩存命令。即用戶(hù)再次訪問(wèn)此項(xiàng)目時(shí)，省略3D模型緩存過(guò)程，直接由訪問(wèn)設(shè)備渲染3D模型，加載因此速度得以大幅提升，具體性能取決于電腦網(wǎng)絡(luò)速度或開(kāi)發(fā)綜合環(huán)境，歡迎體驗(yàn)。

據(jù)實(shí)測(cè)，大型3D項(xiàng)目加載速度普遍可提升3倍以上，部分超大型項(xiàng)目加載速度可提升至10倍。

首次加載至少需要62秒，啟用本地緩存功能之后，大型3D場(chǎng)景加載僅用19秒，性能提速62%。

本地緩存技術(shù)具體由thing.cached.min.js庫(kù)封裝，直接調(diào)用JavaScript腳本加載運(yùn)行。請(qǐng)參考以下操作步驟：

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