Maximale Leistung von IndexedDB mit Storage-Buckets

Das Chrome-Team hat die Implementierung von IndexedDB (IDB) in Bezug auf die Leistung verbessert. Eine dieser Verbesserungen bestand darin, den Back-Store jeder Instanz in eine separate Sequenz zu verschieben. Sie können sich das ungefähr als separaten Thread vorstellen. Das bedeutet, dass die gleichzeitige Verwendung von IDB jetzt schneller ist, entweder von derselben Website oder websiteübergreifend. In diesem Beitrag finden Sie alle Details und erfahren, was Sie tun müssen, um diese Funktion zu nutzen, die ab Chrome 126 verfügbar ist.

Websiteübergreifend

Wenn Sie IDB websiteübergreifend verwenden, müssen Sie nichts unternehmen. Sobald diese Verschiebung auf Browserebene erfolgt ist und der Back-End-Speicher jeder IDB-Instanz in eine separate Sequenz verschoben wurde, profitieren Sie von der Leistungssteigerung, ohne dass Sie etwas tun müssen.

SameSite

Wenn Sie diese Leistungssteigerung für die Nutzung auf derselben Website nutzen möchten, müssen Sie die IDB-Nutzung in verschiedene Instanzen, also Speicher-Buckets, unterteilen. Das folgende Codebeispiel zeigt, wie das funktioniert:

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. */
};

Unterstützte Browser

Die in diesem Beitrag erwähnte Leistungssteigerung ist eine progressive Verbesserung, die Sie nutzen können, wenn die Storage Buckets API in Ihrem Browser unterstützt wird (ab Chrome 122) und die IDB-Instanzen ab Chrome 126 sharded sind.

Demo

Demo dieser Funktion auf Glitch ansehen Im Quellcode wird das Konzept aus dem vorherigen Code-Snippet in Aktion gezeigt. Folgen Sie der Anleitung in der Demo genau. Wenn Sie die IDB-Instanzen mit Chrome DevTools prüfen, sehen Sie den verwendeten Speicher-Bucket im Abschnitt Bucket-Name, der im folgenden Screenshot rot hervorgehoben ist.

Chrome-Entwicklertools mit IndexedDB-Bereich Es gibt zwei Protokolldatenbanken, den Namen des Speicher-Buckets

Danksagungen

Dieser Beitrag wurde von Evan Stade und Rachel Andrew geprüft.