Nhóm Chrome đã thực hiện một số điểm cải tiến liên quan đến hiệu suất để triển khai IndexedDB (IDB). Một điểm cải tiến như vậy là di chuyển bộ nhớ đệm của mỗi thực thể sang một trình tự 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 đồng thời IDB hiện 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 việc bạn cần làm để tận dụng tính năng này, có trong Chrome 126.
Trên 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ớ đệm của mỗi thực thể IDB được di chuyển sang một trình tự riêng biệt, hiệu suất sẽ được cải thiện mà bạn không cần làm gì cả.
Cùng trang web
Để cải thiện hiệu suất này cho hoạt động sử dụng trên cùng một trang web, bạn cần phân tách hoạt động sử dụng IDB thành các thực thể khác nhau, tức là các bộ chứa bộ nhớ. Mã mẫu sau đây cho biết cách hoạt động của cách 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 tính năng nâng cao dần mà 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ạ
Hãy xem bản minh hoạ về tính năng này trên Glitch. Mã nguồn cho thấy khái niệm trong đoạn mã trước đó đang hoạt động. Hãy nhớ làm theo hướng dẫn trong bản minh hoạ một cách cẩn thận. Nếu kiểm tra các thực thể IDB bằng Công cụ của Chrome cho nhà phát triển, bạn có thể thấy bộ nhớ được sử dụng trong phần Tên bộ nhớ, được đánh dấu bằng hộp màu đỏ trong ảnh chụp màn hình sau.
Đường liên kết có liên quan
Lời cảm ơn
Bài đăng này đã được Evan Stade và Rachel Andrew xem xét.