Chrome की टीम ने IndexedDB (IDB) को लागू करने के लिए, परफ़ॉर्मेंस से जुड़े कई सुधार किए हैं. इनमें से एक सुधार यह है कि हर इंस्टेंस के बैकिंग स्टोर को एक अलग क्रम में ले जाया गया है. इसे अलग थ्रेड के तौर पर भी देखा जा सकता है. इसका मतलब है कि एक ही साइट या अलग-अलग साइटों से, IDB का एक साथ इस्तेमाल करने की प्रोसेस अब ज़्यादा तेज़ हो गई है. इस पोस्ट में इस सुविधा के बारे में पूरी जानकारी दी गई है. साथ ही, यह भी बताया गया है कि इस सुविधा का फ़ायदा पाने के लिए आपको क्या करना होगा. यह सुविधा, Chrome 126 से उपलब्ध है.
क्रॉस-साइट
अगर आईडीबी का इस्तेमाल अलग-अलग साइटों पर किया जा रहा है, तो आपको कुछ करने की ज़रूरत नहीं है. ब्राउज़र-लेवल पर यह बदलाव होने और हर IDB इंस्टेंस के बैकिंग स्टोर को अलग क्रम में ले जाने के बाद, आपको कुछ भी करने की ज़रूरत नहीं है.
Same-site
एक ही साइट के इस्तेमाल के लिए परफ़ॉर्मेंस में यह बढ़ोतरी पाने के लिए, आपको अपने आईडीबी के इस्तेमाल को अलग-अलग इंस्टेंस में बांटना होगा. जैसे, स्टोरेज बकेट. नीचे दिए गए कोड सैंपल से पता चलता है कि यह कैसे काम कर सकता है:
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. */
};
ब्राउज़र समर्थन
इस पोस्ट में बताई गई परफ़ॉर्मेंस में बढ़ोतरी, एक बेहतर सुविधा है. इसका इस्तेमाल तब किया जा सकता है, जब आपके ब्राउज़र में Storage Buckets API काम करता हो (Chrome 122 से) और IDB इंस्टेंस को Chrome 126 से, अलग-अलग हिस्सों में बांटा गया हो.
डेमो
Glitch पर इस सुविधा का डेमो देखें. सोर्स कोड, पिछले कोड स्निपेट के कॉन्सेप्ट को काम करते हुए दिखाता है. डेमो में दिए गए निर्देशों का ध्यान से पालन करें. Chrome DevTools की मदद से IDB इंस्टेंस की जांच करने पर, बकेट का नाम सेक्शन में इस्तेमाल की गई स्टोरेज बकेट देखी जा सकती है. इस सेक्शन को नीचे दिए गए स्क्रीनशॉट में लाल बॉक्स से हाइलाइट किया गया है.
इसी विषय से जुड़े कुछ लिंक
आभार
इस पोस्ट की समीक्षा, एवन स्टैड और रेचल एंड्रयू ने की है.