Команда 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. */
};
Поддержка браузера
Увеличение производительности, упомянутое в этом посте, — это прогрессивное улучшение, которое вы можете использовать, когда API Storage Buckets поддерживается в вашем браузере (начиная с Chrome 122) и когда экземпляры IDB сегментируются, начиная с Chrome 126.
Демо
Посмотрите демо-версию этой функции на Glitch. Исходный код демонстрирует концепцию из предыдущего фрагмента кода в действии. Обязательно внимательно следуйте инструкциям в демо-версии. Если вы проверите экземпляры IDB с помощью Chrome DevTools, вы увидите используемый сегмент хранилища в разделе Имя сегмента , выделенном красной рамкой на следующем снимке экрана.
Ссылки по теме
Благодарности
Этот пост рассмотрели Эван Стэйд и Рэйчел Эндрю .