Desempenho máximo do IndexedDB com buckets de armazenamento

Thomas Steiner

A equipe do Chrome fez uma série de melhorias relacionadas ao desempenho da implementação do IndexedDB (IDB). Uma dessas melhorias tem sido a migração armazenamento de backup de cada instância em uma sequência separada (pense nesse mais ou menos como uma linha de execução separada). Isso significa que o uso simultâneo do IDB é mais rápido, seja no mesmo site ou entre sites. Esta postagem oferece os detalhes e explica o que você precisa fazer para tirar proveito da mudança, disponível no Chrome 126.

Entre sites

Caso seu uso do IDB seja entre sites, você não precisa fazer nada. Assim que mudança no nível do navegador, e o armazenamento de backup de cada instância do IDB em uma sequência separada, você ganha o desempenho sem precisar fazer nada.

Mesmo site

Para ter essa melhoria de desempenho no mesmo site, é preciso separar o uso do IDB em instâncias diferentes, 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 é um aprimoramento progressivo que use quando a API Storage Buckets estiver disponível no navegador (do Chrome 122) e quando as instâncias do IDB são fragmentadas, a partir do Chrome 126.

Demonstração

Confira a demonstração desse recurso na Falha. O código-fonte mostra as o conceito do snippet de código anterior em ação. Siga com atenção siga as instruções da demonstração. Se você inspecionar as instâncias do IDB com o Chrome DevTools, é possível ver o bucket de armazenamento usado na seção Nome do bucket, destacado com uma caixa vermelha na captura de tela a seguir.

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

Agradecimentos

Esta postagem foi revisada por Evan Stade e Rachel Andrew.