Desempenho máximo do IndexedDB com buckets de armazenamento

Thomas Steiner

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 apoio 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 do mesmo site ou entre sites. Esta postagem dá todos os detalhes e explica o que você precisa fazer para aproveitar essa mudança, que está disponível a partir do Chrome 126.

Entre sites

Se o uso do IDB for entre sites, não é necessário fazer nada. Depois que essa movimentação no nível do navegador for concluída e o armazenamento de apoio de cada instância do IDB for movido para uma sequência separada, o ganho de performance vai acontecer sem que você precise fazer nada.

Same-site

Para ter essa melhoria de desempenho no uso do mesmo site, é necessário separar o uso do IDB em diferentes instâncias, ou seja, buckets de armazenamento. O exemplo de código a seguir mostra como isso pode funcionar:

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 é uma melhoria progressiva que você pode usar quando a API Storage Buckets for compatível com seu navegador (a partir do Chrome 122) e quando as instâncias do IDB forem fragmentadas, a partir do Chrome 126.

DevTools

Se você inspecionar as instâncias do IDB com o Chrome DevTools, poderá ver o bucket de armazenamento usado na seção Nome do bucket, destacado com uma caixa vermelha na captura de tela a seguir.

O Chrome DevTools inspecionando a seção IndexedDB. Há dois bancos de dados de registros, o nome do bucket de armazenamento

Agradecimentos

Esta postagem foi revisada por Evan Stade e Rachel Andrew.