Команда 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).
DevTools
Если вы проверите экземпляры IDB с помощью Chrome DevTools, то увидите используемый контейнер хранилища в разделе Имя контейнера , выделенный красной рамкой на следующем снимке экрана.
Ссылки по теме
Благодарности
Эту публикацию проверили Эван Стэйд и Рэйчел Эндрю .