Het Chrome-team heeft een aantal prestatiegerelateerde verbeteringen doorgevoerd in de implementatie van IndexedDB (IDB). Een van die verbeteringen is het verplaatsen van de back-up store van elke instance naar een aparte sequentie (je kunt dit grofweg zien als een aparte thread). Dit betekent dat gelijktijdig gebruik van IDB nu sneller is, zowel vanaf dezelfde site als vanaf meerdere sites. Dit bericht geeft alle details en legt uit wat je moet doen om te profiteren van deze verandering, die beschikbaar is vanaf Chrome 126.
Cross-site
Als u IDB site-onafhankelijk gebruikt, hoeft u niets te doen. Zodra deze verplaatsing op browserniveau heeft plaatsgevonden en de back-upopslag van elke IDB-instantie naar een aparte reeks is verplaatst, profiteert u van de prestatiewinst zonder dat u iets hoeft te doen.
Zelfde locatie
Om deze prestatieverbetering voor gebruik op dezelfde locatie te verkrijgen, moet u uw IDB-gebruik verdelen over verschillende instanties, oftewel opslagbuckets . Het volgende codevoorbeeld laat zien hoe dit werkt:
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. */
};
Browserondersteuning
De prestatieverbetering die in dit bericht wordt genoemd, is een progressieve verbetering waarvan u gebruik kunt maken wanneer de Storage Buckets API wordt ondersteund in uw browser (vanaf Chrome 122) en wanneer de IDB-instanties geshard zijn, vanaf Chrome 126.
Ontwikkelaarshulpmiddelen
Als u de IDB-instanties inspecteert met Chrome DevTools, kunt u de gebruikte opslagbucket zien in de sectie Bucketnaam , gemarkeerd met een rood vak in de volgende schermafbeelding.
Gerelateerde links
Dankbetuigingen
Deze post werd beoordeeld door Evan Stade en Rachel Andrew .