Dexie.js内存管理技巧：在大型数据集操作中避免浏览器崩溃

Dexie.js 内存管理技巧：避免浏览器崩溃

在使用 Dexie.js 操作 大型数据集 时，如果不注意内存管理，可能会导致浏览器内存溢出（OOM，Out of Memory）或崩溃。因此，以下 内存管理技巧 可用于优化性能，减少内存使用，避免浏览器崩溃。

1. 避免一次性加载大量数据

当数据量较大时，不要一次性加载整个数据集，否则会导致浏览器占用过多内存。IndexedDB 是基于磁盘的数据库，Dexie.js 提供了流式读取（Streaming Reads）等方法来减少内存使用。

1.1 使用 each() 代替 toArray()

Dexie 提供了 .each() 方法，它能逐条处理数据，而 toArray() 会一次性把所有数据加载到内存中。

示例：使用 each() 逐条处理

async function processLargeDataSet() {
    await db.users.where('age').above(20).each(user => {
        console.log(user.name, user.age);
    });
}

示例：使用 toArray()（⚠️ 占用大量内存，不推荐）

async function processLargeDataSetBad() {
    const users = await db.users.where('age').above(20).toArray();  // ❌ 占用大量内存
    users.forEach(user => {
        console.log(user.name, user.age);
    });
}

2. 使用 offset() + limit() 分批加载

当查询结果较大时，可以分批加载数据，每次只获取一定数量的记录。

示例：分页加载

async function loadUsersByBatch(batchSize: number, page: number) {
    const users = await db.users.offset(batchSize * page).limit(batchSize).toArray();
    console.log(users);
}
loadUsersByBatch(100, 0); // 每次加载 100 条数据，第一页
loadUsersByBatch(100, 1); // 第二页

3. 使用游标 (cursor()) 进行流式读取

IndexedDB 支持游标（cursor），Dexie.js 提供 each() 和 eachKey() 来逐条读取数据，适用于超大数据量。

示例：使用游标流式读取

async function streamUsers() {
    let count = 0;
    await db.users.where('age').above(20).each(user => {
        console.log(user.name, user.age);
        count++;
        if (count >= 100) return false; // 读取 100 条后停止
    });
}

4. 限制事务的作用范围

Dexie 允许将多个数据库操作合并到同一个事务中，但事务的作用范围不应过大，否则会导致：

• 事务锁定过多数据，影响性能。
• 事务执行时间过长，导致内存溢出。

示例：合理使用事务

async function updateLargeDataSet() {
    await db.transaction('rw', db.users, async () => {
        await db.users.where('age').above(20).modify(user => {
            user.age += 1;
        });
    });
}

5. 分批更新数据

如果数据量特别大，使用 bulkPut() 或 modify() 可能仍会导致高内存使用。可以使用批量更新。

示例：批量更新

async function batchUpdate() {
    let batchSize = 1000;  // 每次更新 1000 条
    let batchCount = 0;

    while (true) {
        const users = await db.users.offset(batchSize * batchCount).limit(batchSize).toArray();
        if (users.length === 0) break; // 读取完所有数据

        await db.transaction('rw', db.users, async () => {
            for (const user of users) {
                user.age += 1;
            }
            await db.users.bulkPut(users);
        });

        batchCount++;
    }
}

6. 删除不必要的数据

在 IndexedDB 中，删除无用数据可以减少存储占用，同时提高查询效率。

示例：清理旧数据

async function cleanupOldUsers() {
    await db.users.where('age').below(18).delete();
}

7. 使用 count() 代替 toArray().length

如果只想获取匹配数据的数量，不要 toArray()，否则会占用大量内存。

示例：使用 count()

async function countUsers() {
    const count = await db.users.where('age').above(20).count();
    console.log(`Total users: ${count}`);
}

⚠ 错误示例（高内存消耗）：

async function countUsersBad() {
    const users = await db.users.where('age').above(20).toArray();
    console.log(`Total users: ${users.length}`); // ❌ 不推荐，会加载所有数据
}

8. 避免 console.log() 过多数据

如果一次性 console.log() 大量数据，浏览器的 DevTools 可能会崩溃。

优化技巧

async function logUsersSafely() {
    let count = 0;
    await db.users.where('age').above(20).each(user => {
        if (count < 10) console.log(user); // 只打印前 10 条数据
        count++;
    });
}

总结

合理使用这些技巧，可以让 Dexie.js 在处理大数据量时更加高效稳定，避免浏览器崩溃！ 🚀