ストレージ バケットでの IndexedDB の最大パフォーマンス

Thomas Steiner

Chrome チームは、IndexedDB（IDB）の実装に関して、パフォーマンス関連の改善を多数行いました。このような改善の 1 つとして、各インスタンスのバッキング ストアを個別のシーケンスに移動しました（これは個別のスレッドとほぼ同じです）。つまり、同じサイトからでもクロスサイトからでも、IDB の同時使用が高速化されます。この投稿では、Chrome 126 から利用可能になるこの変更の詳細と、この変更を活用するために必要な手順について説明します。

クロスサイト

IDB の使用がクロスサイトの場合は、何もする必要はありません。ブラウザレベルの移動が行われ、各 IDB インスタンスのバッキング ストアが別のシーケンスに移動されると、パフォーマンスの向上は自動的に行われます。

Same-site

同じサイトでの使用でこのパフォーマンスの向上を実現するには、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 以降）に利用できるプログレッシブ エンハンスメントです。

DevTools

Chrome DevTools で IDB インスタンスを検査すると、次のスクリーンショットの赤い枠で囲まれた [バケット名] セクションで使用されているストレージ バケットを確認できます。

IndexedDB セクションを検査している Chrome DevTools。ログ データベースは 2 つあり、ストレージ バケット名は

謝辞

この投稿は Evan Stade と Rachel Andrew によってレビューされました。