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 以上版本) 時,您就能善用這項功能。
開發人員工具
如果您使用 Chrome 開發人員工具檢查 IDB 執行個體,可以在「Bucket name」(值區名稱) 部分看到使用的儲存空間值區,如下列螢幕截圖中以紅色方塊標示的部分。
相關連結
特別銘謝
這篇文章由 Evan Stade 和 Rachel Andrew 審查。