Hiệu suất IndexedDB tối đa với Bộ chứa lưu trữ

Nhóm Chrome đã thực hiện một số cải tiến liên quan đến hiệu suất cho quá trình triển khai IndexedDB (IDB). Một trong những cải tiến đó là chuyển kho lưu trữ sao lưu của từng thực thể thành một trình tự riêng (bạn có thể nghĩ về điều này gần như là một chuỗi riêng biệt). Điều này có nghĩa là việc sử dụng đồng thời IDB nhanh hơn, từ cùng một trang web hoặc từ nhiều trang web. Bài đăng này cung cấp tất cả thông tin chi tiết và giải thích những gì bạn cần làm để tận dụng việc di chuyển này, Chính sách này có từ Chrome 126.

Trên nhiều trang web

Nếu bạn sử dụng IDB trên nhiều trang web, thì bạn không cần phải làm gì cả. Sau khi Quá trình di chuyển cấp trình duyệt đã diễn ra và kho lưu trữ sao lưu của mỗi phiên bản IDB là được chuyển sang một trình tự riêng, hiệu suất chiến thắng sẽ đến mà bạn không cần phải làm bất cứ điều gì.

Cùng một trang web

Để nâng cao hiệu suất cho việc sử dụng trên cùng một trang web, bạn cần tách riêng việc sử dụng IDB của mình vào các trường hợp khác nhau, tức là bộ chứa lưu trữ. Mã mẫu sau đây cho biết cách hoạt động:

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. */
};

Hỗ trợ trình duyệt

Mức tăng hiệu suất đề cập trong bài đăng này là một tính năng nâng cao tăng dần bạn có thể tận dụng khi Storage Buckets API được hỗ trợ trong trình duyệt (từ Chrome 122) và khi các phiên bản IDB được phân đoạn, từ Chrome 126.

Bản minh hoạ

Xem bản minh hoạ của tính năng này trên Nhiễu. Mã nguồn này cho biết khái niệm của đoạn mã trước đó trong thực tế. Hãy nhớ tuân thủ cẩn thận theo hướng dẫn trong bản minh hoạ. Nếu bạn kiểm tra các thực thể IDB bằng Chrome Công cụ cho nhà phát triển, bạn có thể thấy bộ chứa lưu trữ đã sử dụng trong phần Tên bộ chứa, được đánh dấu bằng hộp màu đỏ trong ảnh chụp màn hình sau đây.

Công cụ của Chrome cho nhà phát triển kiểm tra phần IndexedDB. Có hai cơ sở dữ liệu nhật ký, tên bộ chứa lưu trữ

Xác nhận

Bài đăng này đã được xem xét bởi Evan StadeRachel Andrew.