L'équipe Chrome a apporté un certain nombre d'améliorations liées aux performances à l'implémentation d'IndexedDB (IDB). L'une de ces améliorations a consisté à déplacer le backing store de chaque instance vers une séquence distincte (vous pouvez considérer cela comme un thread distinct). Cela signifie que l'utilisation simultanée d'IDB est désormais plus rapide, que ce soit à partir du même site ou d'un site croisé. Cet article fournit tous les détails et explique ce que vous devez faire pour profiter de ce changement, disponible à partir de Chrome 126.
Cross-site
Si vous utilisez IDB sur plusieurs sites, vous n'avez rien à faire. Une fois ce déplacement au niveau du navigateur effectué et le magasin de stockage de chaque instance IDB déplacé vers une séquence distincte, le gain de performances se produit sans que vous ayez à faire quoi que ce soit.
Same-site
Pour bénéficier de cette amélioration des performances pour l'utilisation sur le même site, vous devez séparer votre utilisation d'IDB dans différentes instances, c'est-à-dire des buckets de stockage. L'exemple de code suivant montre comment procéder :
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 que vous pouvez utiliser lorsque l'API Storage Buckets est compatible avec votre navigateur (à partir de Chrome 122) et lorsque les instances IDB sont fragmentées, à partir de Chrome 126.
Outils de développement
Si vous inspectez les instances IDB avec les outils de développement Chrome, 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
- Tous les espaces de stockage ne se valent pas : découvrez les buckets de stockage
- Spécification provisoire
- Explication
Remerciements
Cet article a été examiné par Evan Stade et Rachel Andrew.