Il team di Chrome ha apportato una serie di miglioramenti alle prestazioni alla l'implementazione di IndexedDB (IDB). Uno di questi miglioramenti è stato lo spostamento di backup di ogni istanza in una sequenza separata (puoi pensare più o meno come thread separato). Ciò significa che l'uso simultaneo di IDB ora più velocemente, dallo stesso sito o da più siti. Questo post fornisce i dettagli e spiega cosa fare per approfittare di questo passaggio. disponibile da Chrome 126.
Tra siti
Se il tuo utilizzo di IDB è cross-site, non devi fare nulla. Una volta è avvenuto lo spostamento a livello di browser e il backing store di ogni istanza IDB spostati in una sequenza a parte, la vittoria in termini di prestazioni senza che tu debba farlo qualsiasi cosa.
Stesso sito
Per ottenere questo miglioramento delle prestazioni per l'utilizzo sullo stesso sito, devi separare l'utilizzo di IDB in istanze diverse, ovvero bucket di archiviazione. Il seguente esempio di codice mostra come funziona:
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 del rendimento menzionato in questo post è un miglioramento progressivo che puoi sfruttare quando l'API Storage Buckets è supportata nel tuo browser (da Chrome 122) e quando viene eseguito lo sharding delle istanze IDB, da Chrome 126.
Demo
Guarda la demo di questa funzionalità su Glitch. Il codice sorgente mostra la del precedente snippet di codice in azione. Segui attentamente le istruzioni nella demo. Se ispezioni le istanze IDB con Chrome DevTools, puoi vedere il bucket di archiviazione utilizzato nella sezione Nome bucket, evidenziato con un riquadro rosso nello screenshot seguente.
Link correlati
- Non tutto lo spazio di archiviazione è uguale: introduzione dei bucket di archiviazione
- Specifiche in bozza
- Spiegazione
Ringraziamenti
Questo post è stato esaminato da Evan Stade e Rachel Andrew.