Het Chrome-team heeft een aantal prestatiegerelateerde verbeteringen aangebracht in de implementatie van IndexedDB (IDB). Eén van die verbeteringen is het verplaatsen van de achtergrondopslag van elke instantie naar een afzonderlijke reeks (je kunt dit grofweg zien als een afzonderlijke thread). Wat dit betekent is dat het gelijktijdige gebruik van IDB nu sneller is, hetzij vanaf dezelfde site, hetzij vanaf meerdere sites. Dit bericht bevat alle details en legt uit wat u moet doen om te profiteren van deze overstap, die beschikbaar is via Chrome 126.
Cross-site
Als u IDB cross-site gebruikt, hoeft u niets te doen. Zodra deze verplaatsing op browserniveau heeft plaatsgevonden en de back-upopslag van elke IDB-instantie naar een afzonderlijke reeks is verplaatst, komt de prestatiewinst zonder dat u iets hoeft te doen.
Zelfde site
Om deze prestatieverbetering voor gebruik op dezelfde site te verkrijgen, moet u uw IDB-gebruik scheiden in verschillende instanties, dat wil zeggen opslagbuckets . Het volgende codevoorbeeld laat zien hoe dit kan werken:
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. */
};
Browser-ondersteuning
De prestatiewinst die in dit bericht wordt genoemd, is een progressieve verbetering waar u gebruik van kunt maken wanneer de Storage Buckets API wordt ondersteund in uw browser (vanaf Chrome 122) en wanneer de IDB-instanties worden geshard, vanaf Chrome 126.
Demo
Bekijk de demo van deze functie op Glitch. De broncode toont het concept uit het vorige codefragment in actie. Zorg ervoor dat u de instructies in de demo zorgvuldig volgt. Als u de IDB-instanties inspecteert met Chrome DevTools, kunt u de gebruikte opslagbucket zien in de sectie Bucketnaam , gemarkeerd met een rood vakje in de volgende schermafbeelding.
Gerelateerde links
Dankbetuigingen
Dit bericht is beoordeeld door Evan Stade en Rachel Andrew .