ทีม 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 คุณจะเห็นที่เก็บข้อมูลที่ใช้ในส่วนชื่อที่เก็บข้อมูล ซึ่งไฮไลต์ด้วยกล่องสีแดงในภาพหน้าจอต่อไปนี้
ลิงก์ที่เกี่ยวข้อง
- พื้นที่เก็บข้อมูลแต่ละประเภทมีความแตกต่างกัน: ขอแนะนําที่เก็บข้อมูล Storage
- ข้อกำหนดฉบับร่าง
- คำอธิบาย
ขอขอบคุณ
โพสต์นี้ผ่านการตรวจสอบโดย Evan Stade และ Rachel Andrew