Rendimiento máximo de IndexedDB con buckets de almacenamiento

El equipo de Chrome realizó varias mejoras relacionadas con el rendimiento en la implementación de IndexedDB (IDB). Una de esas mejoras fue trasladar el de copia de seguridad de cada instancia en una secuencia diferente (puedes considerar este más o menos como un subproceso independiente). Esto significa que el uso simultáneo de IDB ahora son más rápidas, ya sea desde el mismo sitio o desde varios sitios. En esta publicación, se ofrece y explica qué debes hacer para aprovechar esta migración que está disponible a partir de Chrome 126.

Entre sitios

Si el uso de IDB es multisitio, no es necesario que realices ninguna acción. Una vez que se produjo el traslado a nivel del navegador, y el almacén de copia de seguridad de cada instancia del IDB está se trasladan a una secuencia separada, la mejora en el rendimiento se produce sin que deba realizar nada.

Mismo sitio

Para obtener esta mejora de rendimiento para el uso en el mismo sitio, debes segregar el uso del IDB en diferentes instancias, es decir, buckets de almacenamiento. La siguiente muestra de código muestra cómo puede 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. */
};

Navegadores compatibles

El aumento del rendimiento mencionado en esta publicación es una mejora progresiva que puedes usar cuándo la API de Storage Buckets es compatible con tu navegador (de Chrome 122) y cuando las instancias de IDB están fragmentadas, de Chrome 126.

Demostración

Mira la demostración de esta función en Error. El código fuente muestra la concepto del fragmento de código anterior en acción. Asegúrate de seguir cuidadosamente según las instrucciones de la demostración. Si inspeccionas las instancias de IDB con Chrome Herramientas para desarrolladores, puedes ver el bucket de almacenamiento usado en la sección Nombre del bucket. se destaca con un cuadro rojo en la captura de pantalla siguiente.

Las Herramientas para desarrolladores de Chrome inspeccionan la sección IndexedDB. Hay dos bases de datos de registros: el nombre del bucket

Agradecimientos

Esta publicación fue revisada por Evan Stade y Rachel Andrew.