ประสิทธิภาพ 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

เครื่องมือสำหรับนักพัฒนาเว็บ

หากตรวจสอบอินสแตนซ์ IDB ด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome คุณจะเห็นที่เก็บข้อมูลที่ใช้ในส่วนชื่อที่เก็บข้อมูล ซึ่งไฮไลต์ด้วยกรอบสีแดงในภาพหน้าจอต่อไปนี้

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ตรวจสอบส่วน IndexedDB มีฐานข้อมูลบันทึก 2 ฐานข้อมูล ชื่อที่เก็บข้อมูลของพื้นที่เก็บข้อมูล

คำขอบคุณ

โพสต์นี้ได้รับการตรวจสอบโดย Evan Stade และ Rachel Andrew