A equipe do Chrome fez várias melhorias relacionadas ao desempenho na implementação do IndexedDB (IDB). Uma dessas melhorias foi mover o armazenamento de cada instância para uma sequência separada (pense nisso como uma linha de execução separada). Isso significa que o uso simultâneo do IDB agora é mais rápido, seja no mesmo site ou entre sites. Esta postagem traz todos os detalhes e explica o que você precisa fazer para aproveitar essa mudança, que está disponível no Chrome 126.
Entre sites
Se o uso do IDB for entre sites, não será necessário fazer nada. Depois que essa mudança no nível do navegador acontece e o armazenamento de cada instância do IDB é movido para uma sequência separada, a melhoria de desempenho acontece sem que você precise fazer nada.
No mesmo site
Para conseguir esse aprimoramento de desempenho no uso do mesmo site, é necessário separar o uso do IDB em instâncias diferentes, ou seja, buckets de armazenamento. O exemplo de código abaixo mostra como isso funciona:
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. */
};
Suporte ao navegador
O ganho de desempenho mencionado nesta postagem é um aprimoramento progressivo que pode ser usado quando a API Storage Buckets tiver suporte no navegador (a partir do Chrome 122) e quando as instâncias do IDB forem fragmentadas, a partir do Chrome 126.
Demonstração
Confira a demonstração desse recurso no Glitch. O código-fonte mostra o conceito do snippet de código anterior em ação. Siga cuidadosamente as instruções na demonstração. Se você inspecionar as instâncias do IDB com o Chrome DevTools, poderá conferir o bucket de armazenamento usado na seção Nome do bucket, destacado com uma caixa vermelha na captura de tela a seguir.
Links relacionados
- Nem todo armazenamento é igual: apresentamos os buckets de armazenamento
- Especificação de rascunho
- Explicação
Agradecimentos
Esta postagem foi revisada por Evan Stade e Rachel Andrew.