ביצועים מקסימליים ב-IndexedDB עם קטגוריות אחסון

צוות 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, אפשר לראות את קטגוריית האחסון שבה נעשה שימוש בקטע שם הקטגוריה, שמסומן בקופסה אדומה בצילום המסך הבא.

כלי הפיתוח ל-Chrome בודקים את הקטע IndexedDB. יש שני מסדי נתונים של יומנים, שם קטגוריית האחסון

תודות

הפוסט הזה נבדק על ידי Evan Stade ו-Rachel Andrew.