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

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 以降)に利用できる段階的な機能強化です。

デモ

Glitch でこの機能のデモをご覧ください。ソースコードは、上記のコード スニペットのコンセプトを実際に示しています。デモの手順に沿って慎重に操作してください。Chrome DevTools で IDB インスタンスを調べると、使用されているストレージ バケットが [バケット名] セクションに表示されます(次のスクリーンショットで赤いボックスでハイライト表示されています)。

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

謝辞

この投稿は、Evan StadeRachel Andrew が確認しました。