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

Chrome 团队已对 Chrome 浏览器和 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 中)以及在 Chrome 126 中将 IDB 实例分片时。

演示

如需查看此功能的演示,请访问 故障。源代码显示了 上一个代码段的实际应用概念请务必严格遵循 请参阅演示中的说明如果您使用 Chrome 检查 IDB 实例 在开发者工具中,您可以在存储分区名称部分查看已使用的存储分区, 在下面的屏幕截图中以红色框突出显示。

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

致谢

此帖子的审核者: Evan StadeRachel Andrew