Il team di Chrome ha apportato una serie di miglioramenti relativi alle prestazioni all'implementazione di IndexedDB (IDB). Uno di questi miglioramenti è stato lo spostamento del backing store di ogni istanza in una sequenza separata (puoi considerarlo approssimativamente come un thread separato). Ciò significa che l'utilizzo simultaneo dell'IDB è ora più veloce, sia dallo stesso sito sia da più siti. Questo post fornisce tutti i dettagli e spiega cosa devi fare per sfruttare questa funzionalità, disponibile a partire da Chrome 126.
Tra siti
Se utilizzi gli IDB su più siti, non devi fare nulla. Una volta eseguita questa migrazione a livello di browser e spostato il backing store di ogni istanza IDB in una sequenza separata, il miglioramento del rendimento avviene senza che tu debba fare nulla.
Same-site
Per ottenere questo miglioramento delle prestazioni per l'utilizzo nello stesso sito, devi separare l'utilizzo dell'IDB in istanze diverse, ovvero bucket di archiviazione. Il seguente esempio di codice illustra come può funzionare:
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. */
};
Supporto browser
Il miglioramento delle prestazioni menzionato in questo post è un miglioramento progressivo che puoi utilizzare quando l'API Storage Buckets è supportata nel tuo browser (da Chrome 122) e quando le istanze IDB sono suddivise in parti, da Chrome 126.
Demo
Dai un'occhiata alla demo di questa funzionalità su Glitch. Il codice sorgente mostra il concetto dello snippet di codice precedente in azione. Assicurati di seguire attentamente le istruzioni nella demo. Se ispezioni le istanze IDB con Chrome DevTools, puoi vedere il bucket di archiviazione utilizzato nella sezione Nome bucket, evidenziata da una casella rossa nello screenshot seguente.
Link correlati
- Non tutto lo spazio di archiviazione è uguale: presentazione dei bucket di archiviazione
- Bozza della specifica
- Spiegazione
Ringraziamenti
Questo post è stato esaminato da Evan Stade e Rachel Andrew.