搭配使用儲存空間值區的索引資料庫效能上限

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」部分看到已使用的儲存值區,如下圖截圖中以紅色方塊標示。

Chrome 開發人員工具檢查 IndexedDB 部分。有兩個記錄資料庫,分別是儲存值區名稱

特別銘謝

這篇文章由 Evan StadeRachel Andrew 審查。