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

Thomas Steiner

Chrome 团队对 IndexedDB (IDB) 的实现做出了多项与性能相关的改进。其中一个改进就是将每个实例的后备存储区移至单独的序列（您可以将其大致视为单独的线程）。这意味着，无论是从同一网站还是跨网站，并发使用 IDB 的速度现在都更快了。本文将详细介绍此举措，并说明您需要采取哪些措施才能充分利用这一功能（该功能从 Chrome 126 开始提供）。

跨网站

如果您使用 IDB 是跨网站的，则无需执行任何操作。完成此浏览器级迁移后，每个 IDB 实例的后备存储区都会迁移到单独的序列，您无需执行任何操作即可获得性能提升。

Same-site

如需针对同一网站使用情况实现此性能提升，您需要将 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 开始）时，您就可以使用该功能。

演示

您可以在 Glitch 上查看此功能的演示。源代码展示了上一个代码段中的概念在实际运作中的情形。请务必仔细按照演示中的说明操作。如果您使用 Chrome 开发者工具检查 IDB 实例，则可以在存储分区名称部分（在以下屏幕截图中用红色框突出显示）中看到所用存储分区。

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

致谢

此邮件已由 Evan Stade 和 Rachel Andrew 审核。