Maksymalna wydajność IndexedDB z zasobnikami na dane

Thomas Steiner

Zespół Chrome wprowadził szereg ulepszeń związanych z wydajnością implementacji IndexedDB (IDB). Jednym z takich ulepszeń było przeniesienie pamięci zapasowej każdej instancji do osobnej sekwencji (można to w przybliżeniu traktować jako osobny wątek). Oznacza to, że jednoczesne korzystanie z IDB jest teraz szybsze, zarówno w przypadku tej samej witryny, jak i w przypadku różnych witryn. W tym poście znajdziesz wszystkie szczegóły i dowiesz się, co musisz zrobić, aby skorzystać z tej zmiany, która jest dostępna w Chrome 126.

W wielu witrynach

Jeśli korzystasz z IDB w wielu witrynach, nie musisz nic robić. Gdy ta zmiana na poziomie przeglądarki zostanie wprowadzona, a pamięć zapasowa każdej instancji IDB zostanie przeniesiona do osobnej sekwencji, wzrost wydajności nastąpi bez Twojej interwencji.

Same-site

Aby uzyskać poprawę wydajności w przypadku korzystania z tej samej witryny, musisz podzielić korzystanie z IDB na różne instancje, czyli zasobniki pamięci. Poniższy przykładowy kod pokazuje, jak to może działać:

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. */
};

Obsługa przeglądarek

Wzrost wydajności wspomniany w tym poście to progresywne ulepszenie, z którego możesz korzystać, gdy interfejs Storage Buckets API jest obsługiwany w Twojej przeglądarce (od Chrome 122) i gdy instancje IDB są dzielone na fragmenty (od Chrome 126).

Narzędzia deweloperskie

Jeśli sprawdzisz instancje IDB za pomocą narzędzi Chrome DevTools, w sekcji Bucket name (Nazwa zasobnika) zobaczysz używany zasobnik pamięci. Na zrzucie ekranu poniżej jest on wyróżniony czerwonym prostokątem.

Narzędzia deweloperskie w Chrome sprawdzające sekcję IndexedDB. Istnieją 2 bazy danych dzienników, nazwa zasobnika pamięci

Podziękowania

Ten post został sprawdzony przez Evana Stade i Rachel Andrew.