使用存储分区时的最大 IndexedDB 性能

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

浏览器支持

本文中提到的性能提升是一项渐进式增强功能,当您的浏览器支持 Storage Buckets API(自 Chrome 122 起)且 IDB 实例分片(自 Chrome 126 起)时,您便可以利用此功能。

开发者工具

如果您使用 Chrome 开发者工具检查 IDB 实例,则可以在“存储分区名称”部分看到所用的存储分区,如以下屏幕截图中用红框突出显示的部分所示。

Chrome 开发者工具检查 IndexedDB 部分。有两个日志数据库,存储分区名称

致谢

此博文由 Evan StadeRachel Andrew 审核。