Depolama Paketleri ile maksimum IndexedDB performansı

Chrome ekibi, IndexedDB (IDB) uygulamasında performansla ilgili çeşitli iyileştirmeler yaptı. Bu iyileştirmelerden biri, her örneğin destek deposunu ayrı bir sıraya taşımaktı (bunu kabaca ayrı bir iş parçacığı olarak düşünebilirsiniz). Bu, IDB'nin aynı siteden veya siteler arası olarak eşzamanlı kullanımının artık daha hızlı olduğu anlamına gelir. Bu gönderide tüm ayrıntılar verilmektedir ve Chrome 126'tan itibaren kullanılabilen bu değişiklikten yararlanmak için yapmanız gerekenler açıklanmaktadır.

Siteler arası

IDB'yi siteler arası kullanıyorsanız herhangi bir işlem yapmanız gerekmez. Tarayıcı düzeyinde bu taşıma işlemi yapıldıktan ve her IDB örneğinin yedek depolama alanı ayrı bir sıraya taşındıktan sonra, herhangi bir şey yapmanıza gerek kalmadan performans kazancı elde edilir.

Aynı site

Aynı sitede kullanım için bu performans artışını elde etmek üzere IDB kullanımınızı farklı örneklere (depolama paketleri) ayırmanız gerekir. Aşağıdaki kod örneğinde, bunun nasıl çalışabileceği gösterilmektedir:

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

Tarayıcı desteği

Bu yayında bahsedilen performans artışı, tarayıcınızda Storage Buckets API desteklendiğinde (Chrome 122'den itibaren) ve IDB örnekleri bölümlendiğinde (Chrome 126'dan itibaren) kullanabileceğiniz aşamalı bir geliştirmedir.

Demo

Glitch'te bu özelliğin demo videosuna göz atın. Kaynak kod, önceki kod snippet'indeki kavramı çalışırken gösterir. Demodaki talimatları dikkatlice uyguladığınızdan emin olun. IDB örneklerini Chrome Geliştirici Araçları ile incelerseniz kullanılan depolama alanı paketini Paket adı bölümünde görebilirsiniz. Bu bölüm aşağıdaki ekran görüntüsünde kırmızı kutuyla vurgulanmıştır.

Chrome Geliştirici Araçları'nda IndexedDB bölümü inceleniyor. İki günlük veritabanı vardır: depolama paketi adı

Teşekkür ederiz

Bu yayın Evan Stade ve Rachel Andrew tarafından incelendi.