ประสิทธิภาพ 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 DevTools กำลังตรวจสอบส่วน IndexedDB มีฐานข้อมูลบันทึก 2 แหล่ง ได้แก่ ชื่อที่เก็บข้อมูลของพื้นที่เก็บข้อมูล

กิตติกรรมประกาศ

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