حداکثر عملکرد IndexedDB با Storage Buckets

تیم 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 بررسی کنید، می‌توانید سطل ذخیره‌سازی استفاده‌شده را در بخش Bucket name ببینید که با کادر قرمز در تصویر زیر مشخص شده است.

Chrome DevTools در حال بازرسی بخش IndexedDB. دو پایگاه داده لاگ وجود دارد، نام سطل ذخیره سازی

قدردانی ها

این پست توسط ایوان استاد و ریچل اندرو بازبینی شده است.