用 IndexedDB 缓存静态字典可减少首屏延迟：启动时建库写入，运行时优先读取，失败则回退 fetch；需注意事务大小、版本升级、错误兜底及与 UI 解耦。
在 JavaScript 中，用 IndexedDB 缓存大型静态数据字典（如城市列表、行业分类、国家代码等）能显著减少首屏请求延迟，避免阻塞渲染。核心思路是：首次加载时异步写入 IndexedDB，后续访问直接从本地数据库读取，绕过网络请求。
初始化并打开数据库
IndexedDB 需要显式打开数据库并创建对象存储（Object Store）。建议在应用启动早期（如 DOMContentLoaded 后）执行，不阻塞渲染：
- 使用
indexedDB.open()打开或创建数据库，指定版本号； - 在
onupgradeneeded回调中创建 object store（如"dicts"），并设置主键（如name字段）； - 若版本升级，可在此迁移旧数据，但静态字典通常只需初始化一次。
预加载字典并写入 IndexedDB
首次访问时，从 JSON 文件（如 /data/cities.json）获取字典，写入前先检查是否已存在，避免重复写入：
- 用
fetch()获取字典数据，确保Content-Type为application/json； - 打开数据库的读写事务，获取
dictsobject store； - 用
put()存储，主键设为字典标识（如{ key: "cities", value: [...] }）； - 写入成功后，可标记本地缓存就绪（如
localStorage.setItem("dicts_cached", "1")供后续快速判断）。
运行时优先读取 IndexedDB，降级回 fetch
组件或逻辑需要字典时，不直接发请求，而是按以下顺序获取：
立即学习“Java免费学习笔记（深入）”；
- 检查 IndexedDB 是否已就绪且包含对应字典（用
get()查询）； - 命中则立即 resolve 数据，用于渲染（如填充下拉框）；
- 未命中或读取失败（如数据库未初始化、版本冲突），自动 fallback 到
fetch并同步写入 DB； - 注意：读取操作本身是异步的，需配合 Promise 或 async/await，但不会阻塞主线程。
优化细节与注意事项
提升稳定性和性能的关键点：
- 避免大事务：单次写入不要超过 50MB；超大字典可分块（如按首字母拆成多个 record）；
-
监听删除事件：用户手动清除缓存时，监听
storage事件并重置本地状态； -
版本控制：字典更新时升级数据库版本，在
onupgradeneeded中清空旧数据并写入新版； -
错误防御：IndexedDB 可能被禁用（如无痕模式）、配额超限或抛出
AbortError，必须有catch并 fallback 到网络请求。
不复杂但容易忽略：把字典加载逻辑和 UI 渲染解耦，用 loading 状态 + 缓存兜底，就能让首屏既快又稳。
