L'équipe Chrome a apporté un certain nombre d'améliorations aux performances du mise en œuvre d'IndexedDB (IDB). L'une de ces améliorations a été de déplacer de chaque instance dans une séquence distincte (vous pouvez considérer à peu près comme un thread distinct). Cela signifie que l'utilisation simultanée d'IDB est plus rapidement, à partir d'un même site ou de plusieurs sites. Ce post présente à tous les détails et explique ce que vous devez faire pour profiter de cette migration, (disponible à partir de Chrome 126).
Intersites
Si votre utilisation de l'IDB est intersites, vous n'avez rien à faire. Une fois que le déplacement au niveau du navigateur a eu lieu, et le magasin de sauvegarde de chaque instance IDB est dans une séquence distincte, la victoire est obtenue sans que vous ayez à faire n'importe quoi.
Même site
Pour profiter de cette amélioration des performances pour une utilisation sur un même site, vous devez séparer votre utilisation de l'IDB dans différentes instances, c'est-à-dire buckets de stockage. L'exemple de code suivant vous explique comment cela peut fonctionner:
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. */
};
Prise en charge des navigateurs
Le gain de performances mentionné dans cet article est une amélioration progressive qui que vous pouvez utiliser lorsque l'API Storage Buckets est prise en charge dans votre navigateur (depuis Chrome 122) et quand les instances IDB sont segmentées, à partir de Chrome 126.
Démo
Regardez la démonstration de cette fonctionnalité sur Glitch. Le code source indique de l'extrait de code précédent en action. Veillez à suivre attentivement en suivant les instructions de la démonstration. Si vous inspectez les instances IDB avec Chrome Dans les outils de développement, vous pouvez voir le bucket de stockage utilisé dans la section Nom du bucket, mise en évidence par un cadre rouge dans la capture d'écran suivante.
Liens associés
- Les espaces de stockage ne se valent pas: découvrez les buckets de stockage
- Spécifications préliminaires
- Vidéo explicative
Remerciements
Ce message a été examiné par Evan Stade et Rachel Andrew.