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 インスタンスを調べると、使用されているストレージ バケットが [バケット名] セクションに表示されます(次のスクリーンショットで赤いボックスでハイライト表示されています)。
関連リンク
謝辞
この投稿は、Evan Stade と Rachel Andrew が確認しました。