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 store de sauvegarde de chaque instance vers une séquence distincte (vous pouvez considérer cela comme un thread distinct). Cela signifie que l'utilisation simultanée de l'IDB est désormais plus rapide, que ce soit depuis le même site ou depuis un site différent. Cet article fournit tous les détails et explique ce que vous devez faire pour profiter de cette fonctionnalité, disponible à partir de Chrome 126.
Intersite
Si vous utilisez l'IDB de manière intersites, vous n'avez rien à faire. Une fois ce transfert au niveau du navigateur effectué et que le stockage en cache de chaque instance IDB est déplacé vers une séquence distincte, les performances sont améliorées sans que vous ayez à faire quoi que ce soit.
Same-site
Pour obtenir cette amélioration des performances pour l'utilisation sur le même site, vous devez séparer votre utilisation de l'IDB en différentes instances, c'est-à-dire en 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
L'amélioration des performances mentionnée dans cet article est une amélioration progressive que vous pouvez utiliser lorsque l'API Storage Buckets est prise en charge dans votre navigateur (à partir de Chrome 122) et lorsque les instances IDB sont partitionnées, à partir de Chrome 126.
Démo
Découvrez la démonstration de cette fonctionnalité sur Glitch. Le code source illustre le concept de l'extrait de code précédent. Veillez à suivre attentivement les instructions de la démonstration. Si vous inspectez les instances IDB avec les outils pour les développeurs 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: présentation des buckets de stockage
- Spécification provisoire
- Explication
Remerciements
Ce post a été examiné par Evan Stade et Rachel Andrew.