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

Thomas Steiner

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 インスタンスを検査する場合 DevTools では、使用されているストレージ バケットが [バケット名] セクションに表示されます。 次のスクリーンショットでは、赤いボックスでハイライト表示されています。

関連リンク

• すべてのストレージが同じように作成されている: ストレージ バケットの概要
• ドラフト仕様
• 説明

謝辞

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