Chrome 團隊已針對 IndexedDB (IDB) 的實作方式,做出許多效能相關的改善。其中一個改善項目是將每個執行個體的備份儲存空間移至個別序列 (您可以將此視為個別執行緒)。也就是說,現在無論是從同一個網站或跨網站,同時使用 IDB 的速度都會更快。本文將提供所有詳細資訊,並說明如何充分利用這項從 Chrome 126 開始提供的功能。
跨網站
如果您跨網站使用 IDB,則無須採取任何行動。一旦瀏覽器層級的移動作業完成,且每個 IDB 例項的備份儲存空間都已移至個別序列,您就無須採取任何行動,就能獲得效能優勢。
同網站
如要針對相同網站使用情形提升效能,您必須將 IDB 用量分隔至不同的例項,也就是儲存值區。以下程式碼範例說明如何執行這項操作:
const request = indexedDB.open('main', 1);
request.onsuccess = (event) => {
/* Do stuff with the main instance. */
};
// By default, just use the regular IDB instance.
let idb = indexedDB;
// Open a separate storage bucket if the API is supported.
if ('storageBuckets' in navigator) {
const bucket = await navigator.storageBuckets.open('logs-bucket');
// Get access to the storage bucket's IDB instance.
idb = bucket.indexedDB;
}
const bucketRequest = idb.open('logs', 1);
bucketRequest.onsuccess = (event) => {
/* Do stuff with the separate instance. */
};
瀏覽器支援
這篇文章提到的效能提升是漸進式增強功能,可在瀏覽器支援 Storage Buckets API (自 Chrome 122 起) 和 IDB 執行個體分割 (自 Chrome 126 起) 時使用。
示範
請前往 Glitch 查看這項功能的示範。原始碼會顯示上一個程式碼片段中實際運作的概念。請務必仔細按照示範中的操作說明進行。如果您使用 Chrome DevTools 檢查 IDB 例項,可以在「Bucket name」部分看到已使用的儲存值區,如下圖截圖中以紅色方塊標示。
相關連結
特別銘謝
這篇文章由 Evan Stade 和 Rachel Andrew 審查。