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.
Weitere Informationen
Danksagungen
Dieser Beitrag wurde von Evan Stade und Rachel Andrew geprüft.