स्टोरेज बकेट के साथ ज़्यादा से ज़्यादा IndexedDB परफ़ॉर्मेंस

Chrome टीम ने IndexedDB (IDB) को लागू करना. इसी तरह के एक सुधार के तौर पर, हर इंस्टेंस का एक अलग क्रम में बैकिंग स्टोर (आपके पास अलग-अलग थ्रेड के तौर पर. इसका मतलब यह है कि एक साथ आईडीबी का इस्तेमाल उसी साइट से या किसी दूसरी साइट से, तेज़ी से काम करने में मदद करता है. इस पोस्ट से वे सभी साथ ही, यह भी बताया गया है कि इस बदलाव का फ़ायदा पाने के लिए आपको क्या करना होगा. जो Chrome के वर्शन 126 में उपलब्ध है.

क्रॉस-साइट

अगर आईडीबी का इस्तेमाल अलग-अलग साइट से किया जाता है, तो आपको कुछ करने की ज़रूरत नहीं है. एक बार ब्राउज़र-लेवल पर माइग्रेट हुआ है और हर IDB इंस्टेंस का बैकिंग स्टोर है क्रम से लगाने पर, परफ़ॉर्मेंस बेहतर हो जाती है और आपको यह करने की ज़रूरत नहीं होती कुछ भी.

एक ही साइट

एक ही साइट के इस्तेमाल के लिए, परफ़ॉर्मेंस को बेहतर बनाने की यह सुविधा पाने के लिए, आपको विज्ञापनों की आपके आईडीबी का इस्तेमाल अलग-अलग मामलों में हो, यानी कि स्टोरेज बकेट. यहां दिया गया कोड सैंपल दिखाता है कि यह कैसे काम कर सकता है:

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 बकेट एपीआई काम करता है (Chrome 122 से) और IDB इंस्टेंस को शार्ड किए जाने पर, Chrome 126 से.

डेमो

इस सुविधा का डेमो यहां देखें ग्लिच. सोर्स कोड पिछले कोड स्निपेट से भी नए तरीके का इस्तेमाल किया जा सकता है. इन नीतियों का पालन ज़रूर करें दिए गए निर्देशों का पालन करें. अगर Chrome के साथ IDB इंस्टेंस की जांच की जाती है DevTools, आपको बकेट का नाम सेक्शन में इस्तेमाल किया गया स्टोरेज बकेट दिख सकता है, नीचे दिए गए स्क्रीनशॉट में लाल रंग के बॉक्स से हाइलाइट किया गया है.

Chrome DevTools, IndexedDB सेक्शन की जांच कर रहा है. दो लॉग डेटाबेस होते हैं, स्टोरेज बकेट का नाम

स्वीकार की गई

इस पोस्ट की समीक्षा इन्होंने की Evan Stade और रेचल एंड्रयू.