IndexedDB用游标分批遍历海量数据，避免内存溢出和卡顿；需在onsuccess中递归调用cursor.continue()推进，配合requestIdleCallback批量渲染与IDBKeyRange实现断点续传。
IndexedDB 中用游标（Cursor）遍历海量数据，核心是避免一次性读取全部数据导致内存溢出或页面卡顿，而是分批读取、逐条或小批量处理并渲染。关键在于正确打开游标、控制遍历节奏、配合 DOM 更新策略（如 requestIdleCallback 或节流），防止阻塞主线程。
用 openCursor 拿到游标并递归遍历
游标本质是数据库中的一次“指针移动”，每次调用 cursor.continue() 向下移动一位。不能直接 for 循环，必须在 success 回调里继续推进。
基础写法示例：
const transaction = db.transaction(['users'], 'readonly');
const store = transaction.objectStore('users');
const request = store.openCursor();
request.onsuccess = function(event) {
const cursor = event.target.result;
if (cursor) {
// 处理当前项：比如 push 到数组、创建 DOM 节点、append 到列表
console.log(cursor.key, cursor.value);
// 继续移动到下一条
cursor.continue();
} else {
console.log('遍历完成');
}
};
分页式批量读取 + requestIdleCallback 控制渲染节奏
面对几万条数据，不建议每条都立刻 append 到 DOM（会频繁触发重排）。推荐：每次游标走 50～200 条，攒一批再批量插入；用 requestIdleCallback 在浏览器空闲时执行，保障滚动和交互流畅。
立即学习“Java免费学习笔记（深入）”；
- 定义 batch size（如 100），用数组暂存当前批次数据
- 游标走到 batch size 或末尾时，暂停，调用
requestIdleCallback批量渲染 - 回调中插入 DOM 后，再继续游标（通过保存 cursor 或重新 openCursor + skip 已读条数）
- 注意：游标对象不可跨事件循环复用，中断后需重新打开（可传 key range 和方向继续）
用 IDBKeyRange 实现“断点续传”式遍历
若中途暂停（比如用户滚动、切换 Tab），可记录上一个 key，下次从该 key 后开始，避免重复或遗漏：
let lastKey = null;
function loadNextBatch() {
const range = lastKey
? IDBKeyRange.lowerBound(lastKey, true) // true 表示不包含 lastKey
: undefined;
const request = store.openCursor(range);
request.onsuccess = function(e) {
const cursor = e.target.result;
if (!cursor) return;
const batch = [];
do {
batch.push(cursor.value);
lastKey = cursor.key;
cursor.continue();
} while (batch.length < 100 && cursor);
// 渲染 batch
renderList(batch);
};
}
结合虚拟滚动提升超长列表性能
即使分批加载，若最终要渲染 10 万条 DOM 元素，仍会崩溃。真实项目中应搭配虚拟滚动（如 react-window 或原生实现）：只渲染可视区域 ± 缓冲区内的条目，其余用占位 <div style="height: Xpx"></div> 占位。
- IndexedDB 只负责按需查“当前页数据”，比如 offset=5000, limit=50
- 用游标 + key range 实现高效 skip（避免全表扫描）：先用 index + openKeyCursor 跳到目标位置，再 continue 读取
- 索引字段必须声明为 unique 或支持多条，否则无法精准定位
