Performa IndexedDB maksimum dengan Bucket Penyimpanan

Tim Chrome telah melakukan sejumlah peningkatan terkait kinerja pada implementasi BYOD (IDB). Salah satu perbaikan tersebut adalah dengan memindahkan menyimpan cadangan setiap instance ke urutan terpisah (Anda dapat memikirkannya kira-kira sebagai thread terpisah). Artinya, penggunaan IDB secara bersamaan kini lebih cepat, baik dari situs yang sama, atau dari lintas situs. Postingan ini memberikan semua detailnya, dan jelaskan apa yang perlu dilakukan untuk memanfaatkan langkah ini, yang tersedia mulai Chrome 126.

Lintas situs

Jika penggunaan IDB bersifat lintas situs, Anda tidak perlu melakukan apa pun. Setelah ini terjadi perpindahan tingkat {i>browser<i}, dan penyimpanan cadangan setiap instance IDB telah dipindahkan ke urutan terpisah, keberhasilan kinerja hadir tanpa Anda harus apa saja.

Situs yang sama

Agar dapat memperoleh peningkatan performa untuk penggunaan di situs yang sama, Anda harus memisahkan penggunaan IDB Anda ke dalam beberapa instance yang berbeda, yaitu, bucket penyimpanan. Contoh kode berikut menunjukkan cara kerjanya:

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

Dukungan browser

Peningkatan performa yang disebutkan dalam postingan ini adalah peningkatan progresif yang Anda dapat memanfaatkan saat Storage Buckets API didukung di browser Anda, (dari Chrome 122) dan kapan instance IDB di-sharding, dari Chrome 126.

Demo

Lihat demo fitur ini di Gangguan. Kode sumber menunjukkan konsep dari cuplikan kode sebelumnya. Pastikan untuk mengikuti dengan cermat instruksi dalam demo. Jika Anda memeriksa instance IDB dengan Chrome DevTools, Anda dapat melihat bucket penyimpanan yang telah digunakan di bagian Bucket name, disorot dengan kotak merah pada screenshot berikut.

Chrome DevTools memeriksa bagian IndexedDB. Ada dua database log, nama bucket penyimpanan

Ucapan terima kasih

Postingan ini telah ditinjau oleh Evan Stade dan Rachel Andrew.