Maksymalna wydajność IndexedDB z zasobnikami na dane

Thomas Steiner

Zespół Chrome wprowadził wiele ulepszeń dotyczących wydajności w ramach implementacji IndexedDB (IDB). Jednym z takich ulepszeń było przeniesienie pamięci podręcznej każdej instancji do osobnej sekwencji (możesz to sobie wyobrażać jako osobny wątek). Oznacza to, że jednoczesne korzystanie z IDB jest teraz szybsze, zarówno w ramach tej samej witryny, jak i między witrynami. W tym poście znajdziesz wszystkie szczegóły i informacje o tym, co musisz zrobić, aby skorzystać z tej funkcji, która jest dostępna w Chrome 126.

W wielu witrynach

Jeśli używasz IDB w wielu witrynach, nie musisz nic robić. Gdy ta zmiana na poziomie przeglądarki zostanie wprowadzona i magazyn danych każdego wystąpienia IDB zostanie przeniesiony do osobnej sekwencji, uzyskasz wyższą wydajność bez konieczności wykonywania jakichkolwiek dodatkowych czynności.

Same-site

Aby uzyskać tę poprawę wydajności w przypadku korzystania z tej samej witryny, musisz oddzielić korzystanie z IDB do różnych instancji, czyli zasobników. Poniższy przykładowy kod pokazuje, jak to 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 stopniowe ulepszenie, z którego możesz korzystać, gdy interfejs Storage Buckets API jest obsługiwany w Twojej przeglądarce (od wersji 122 Chrome) oraz gdy instancje IDB są dzielone (od wersji 126 Chrome).

Prezentacja

Obejrzyj prezentację tej funkcji na Glitch. Kod źródłowy pokazuje działanie koncepcji z poprzedniego fragmentu kodu. Uważnie postępuj zgodnie z instrukcjami w wersji demonstracyjnej. Jeśli zbadasz instancje IDB za pomocą Chrome DevTools, zobaczysz użyty zasób pamięci w sekcji Nazwa zasobnika, zaznaczonej na czerwono na poniższym zrzucie ekranu.

Narzędzia deweloperskie w Chrome – sprawdzanie sekcji IndexedDB. Istnieją 2 bazy danych dzienników, nazwa zasobnika pamięci

Podziękowania

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