使用存储分区时的最大 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 实例
在开发者工具中,您可以在存储分区名称部分查看已使用的存储分区,
在下面的屏幕截图中以红色框突出显示。
致谢
此帖子的审核者:
Evan Stade 和
Rachel Andrew。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2024-06-13。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"没有我需要的信息"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"太复杂/步骤太多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"内容需要更新"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻译问题"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/代码问题"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"易于理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"解决了我的问题"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u6700\u540e\u66f4\u65b0\u65f6\u95f4 (UTC)\uff1a2024-06-13\u3002"}
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2024-06-13。"]]