Maximale Leistung von IndexedDB mit Storage-Buckets

Thomas Steiner

Das Chrome-Team hat eine Reihe von leistungsbezogenen Verbesserungen an der Implementierung von IndexedDB (IDB). Eine solche Verbesserung besteht darin, Sicherungsspeicher jeder Instanz in eine separate Sequenz ein. ungefähr als separater Thread). Die gleichzeitige Verwendung von IDB jetzt schneller, entweder über dieselbe Website oder websiteübergreifend. In diesem Beitrag erhalten alle und erklärt, was Sie tun müssen, um von dieser Umstellung profitieren zu können. die ab Chrome 126 verfügbar ist.

Websiteübergreifend

Wenn Sie IDB websiteübergreifend verwenden, müssen Sie nichts unternehmen. Sobald diese der Wechsel auf Browserebene erfolgte und der Sicherungsspeicher jeder IDB-Instanz in eine andere Sequenz überführt, wird der Leistungsgewinn erzielt, ohne dass irgendetwas.

Gleiche Website

Um diese Leistungssteigerung für die Nutzung derselben Website zu erhalten, müssen Sie die IDB-Nutzung in verschiedene Instanzen aufzuteilen. Storage-Buckets. Im folgenden Codebeispiel wird zeigt, wie das funktionieren kann:

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, Sie können nutzen, wenn die Storage Buckets API in Ihrem Browser unterstützt wird (ab Chrome 122) und wenn die IDB-Instanzen fragmentiert sind, in Chrome 126.

Demo

Sehen Sie sich die Demo dieser Funktion auf Glitch. Der Quellcode enthält die Code-Snippet aus dem vorherigen Code-Snippet in Aktion. Achten Sie darauf, die Anweisungen in der Demo. Wenn Sie die IDB-Instanzen mit Chrome prüfen Entwicklertools können Sie im Abschnitt Bucket-Name sehen, welcher Storage-Bucket verwendet wurde. im folgenden Screenshot mit einem roten Feld markiert.

Chrome-Entwicklertools, die den Bereich „IndexedDB“ untersuchen Es gibt zwei Logdatenbanken:

Danksagungen

Beitrag wurde geprüft von Evan Stade und Rachel Andrew: