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

Thomas Steiner

Nhóm Chrome đã thực hiện một số điểm cải thiện liên quan đến hiệu suất đối với việc triển khai IndexedDB (IDB). Một điểm cải tiến như vậy là di chuyển bộ nhớ dự phòng của mỗi phiên bản sang một chuỗi riêng biệt (bạn có thể coi đây là một luồng riêng biệt). Điều này có nghĩa là việc sử dụng IDB đồng thời hiện nhanh hơn, cho dù là từ cùng một trang web hay từ nhiều trang web. Bài đăng này cung cấp mọi thông tin chi tiết và giải thích những việc bạn cần làm để tận dụng thay đổi này (có trong Chrome 126).

Nhiều trang web

Nếu sử dụng IDB trên nhiều trang web, bạn không cần làm gì cả. Sau khi thao tác di chuyển ở cấp trình duyệt này diễn ra và bộ nhớ dự phòng của mỗi phiên bản IDB được di chuyển đến một chuỗi riêng biệt, bạn sẽ nhận được lợi ích về hiệu suất mà không cần làm gì cả.

Cùng trang web

Để cải thiện hiệu suất này cho việc sử dụng trên cùng một trang web, bạn cần phân tách việc sử dụng IDB thành các phiên bản khác nhau, tức là các vùng lưu trữ. Mã mẫu sau đây cho biết cách hoạt động của việc này:

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 đề cập trong bài đăng này là một điểm cải tiến tăng dần mà bạn có thể tận dụng khi Storage Buckets API được hỗ trợ trong trình duyệt của bạn (từ Chrome 122) và khi các phiên bản IDB được phân đoạn, từ Chrome 126.

Công cụ cho nhà phát triển

Nếu kiểm tra các phiên bản IDB bằng Công cụ cho nhà phát triển của Chrome, bạn có thể thấy vùng lưu trữ đã dùng trong phần Tên vùng lưu trữ, được đánh dấu bằng một hộp màu đỏ trong ảnh chụp màn hình sau.

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

Lời cảm ơn

Bài đăng này đã được Evan Stade và Rachel Andrew xem xét.