צוות Chrome ביצע כמה שיפורים בביצועים של הטמעת IndexedDB (IDB). אחד השיפורים האלה היה העברת מאגר התמיכה של כל מכונה לרצף נפרד (אפשר לחשוב עליו כחוט נפרד). כלומר, השימוש בו-זמנית ב-IDB מהיר יותר עכשיו, בין אם מאותו אתר ובין אם מאתרים שונים. במאמר הזה מפורטים כל הפרטים, ומוסבר מה צריך לעשות כדי ליהנות מהשינוי הזה, שזמין מגרסת Chrome 126.
בין אתרים
אם אתם משתמשים ב-IDB בכמה אתרים, לא נדרשת כל פעולה מצידכם. אחרי שהמעבר ברמת הדפדפן מתבצע, ומאגר התמיכה של כל מכונה של IDB מועבר לרצף נפרד, השיפור בביצועים מתקבל בלי שתצטרכו לעשות דבר.
באותו אתר
כדי ליהנות משיפור הביצועים הזה לשימוש באותו אתר, צריך להפריד את השימוש ב-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 Buckets API נתמך בדפדפן (מ-Chrome 122) וכאשר מכונות ה-IDB מחולקות למקטעים, מ-Chrome 126.
הדגמה (דמו)
אתם יכולים לצפות בהדגמה של התכונה הזו ב-Glitch. בקוד המקור מוצג בפועל הרעיון מקטע הקוד הקודם. חשוב לפעול לפי ההוראות בהדגמה. אם בודקים את המופעים של IDB באמצעות Chrome DevTools, אפשר לראות את קטגוריית האחסון שבה נעשה שימוש בקטע שם הקטגוריה, שמסומן בקופסה אדומה בצילום המסך הבא.
קישורים רלוונטיים
תודות
הפוסט הזה נבדק על ידי Evan Stade ו-Rachel Andrew.