Tim Chrome telah melakukan sejumlah peningkatan terkait performa pada implementasi IndexedDB (IDB). Salah satu peningkatan tersebut adalah memindahkan penyimpanan pendukung setiap instance ke urutan terpisah (Anda dapat menganggapnya secara kasar sebagai thread terpisah). Artinya, penggunaan serentak IDB kini lebih cepat, baik dari situs yang sama, maupun dari lintas situs. Postingan ini memberikan semua detail, dan menjelaskan hal yang perlu Anda lakukan untuk memanfaatkan langkah ini, yang tersedia mulai Chrome 126.
Lintas situs
Jika penggunaan IDB Anda bersifat lintas situs, Anda tidak perlu melakukan apa pun. Setelah pemindahan tingkat browser ini terjadi, dan penyimpanan pendukung setiap instance IDB dipindahkan ke urutan terpisah, peningkatan performa akan terjadi tanpa Anda harus melakukan apa pun.
Situs yang sama
Untuk mendapatkan peningkatan performa ini untuk penggunaan situs yang sama, Anda perlu memisahkan penggunaan IDB ke dalam 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 dapat Anda manfaatkan saat Storage Buckets API didukung di browser (dari Chrome 122) dan saat instance IDB di-shard, dari Chrome 126.
Demo
Lihat demo fitur ini di Glitch. Kode sumber menunjukkan konsep dari cuplikan kode sebelumnya yang sedang berjalan. Pastikan untuk mengikuti petunjuk dalam demo dengan cermat. Jika memeriksa instance IDB dengan Chrome DevTools, Anda dapat melihat bucket penyimpanan yang digunakan di bagian Nama bucket, yang ditandai dengan kotak merah pada screenshot berikut.
Link terkait
Ucapan terima kasih
Postingan ini ditinjau oleh Evan Stade dan Rachel Andrew.