NodeJS MongoDB加载解压大量图片过慢的优化方案求助

问题背景 #

基于NodeJS和MongoDB的应用，上传图片数据后API加载耗时超40秒，即便加限制条件、用游标或只取部分数据也没改善，查询MongoDB还报错。创建索引优化了部分API，但拉取数百条记录时，items[i].imageData = LZString.decompressFromBase64(image.imageData);解压操作耗时过长，尝试集成Worker未成功，需要可行的优化方案。

一、异步并行解压图片数据 #

把同步的解压操作改成异步并行处理，利用Promise.all同时处理多个解压任务，避免单线程长时间阻塞。

修改matchItemImages函数：

async function matchItemImages(items, images) {
    console.log(' about to match images', images.length, items[0]?.name)

    if(images.length === 0) {
        return items.sort((a, b) => {
            const textA = a.name.toUpperCase();
            const textB = b.name.toUpperCase();
            return textA.localeCompare(textB);
        });
    }

    const imagesById = new Map(images.map(image => [image.cloverDataId, image]));
    
    // 并行处理解压任务
    await Promise.all(items.map(async (item) => {
        const image = imagesById.get(item.id);
        if (image) {
            // 把解压放到微任务队列，避免阻塞主线程
            item.imageData = await Promise.resolve().then(() => 
                LZString.decompressFromBase64(image.imageData)
            );
        }
    }));

    return items.sort((a, b) => {
        const textA = a.name.toUpperCase();
        const textB = b.name.toUpperCase();
        return textA.localeCompare(textB);
    });
}

二、Worker线程解压完整实现（解决集成失败问题） #

CPU密集型的解压操作适合用Worker线程隔离，以下是可直接运行的代码：

1. 创建单独的Worker文件decompress.worker.js：

const { parentPort } = require('worker_threads');
const LZString = require('lz-string');

parentPort.on('message', (base64Data) => {
    try {
        const decompressed = LZString.decompressFromBase64(base64Data);
        parentPort.postMessage({ success: true, data: decompressed });
    } catch (err) {
        parentPort.postMessage({ success: false, error: err.message });
    }
});

2. 修改matchItemImages函数调用Worker：

const { Worker } = require('worker_threads');

// 封装Worker解压方法
async function decompressImage(base64Data) {
    return new Promise((resolve, reject) => {
        const worker = new Worker('./decompress.worker.js');
        worker.postMessage(base64Data);
        
        worker.on('message', (result) => {
            worker.terminate();
            result.success ? resolve(result.data) : reject(new Error(result.error));
        });
        
        worker.on('error', (err) => {
            worker.terminate();
            reject(err);
        });
    });
}

async function matchItemImages(items, images) {
    console.log(' about to match images', images.length, items[0]?.name)

    if(images.length === 0) {
        return items.sort((a, b) => {
            const textA = a.name.toUpperCase();
            const textB = b.name.toUpperCase();
            return textA.localeCompare(textB);
        });
    }

    const imagesById = new Map(images.map(image => [image.cloverDataId, image]));
    
    // 并行使用Worker解压
    await Promise.all(items.map(async (item) => {
        const image = imagesById.get(item.id);
        if (image) {
            item.imageData = await decompressImage(image.imageData);
        }
    }));

    return items.sort((a, b) => {
        const textA = a.name.toUpperCase();
        const textB = b.name.toUpperCase();
        return textA.localeCompare(textB);
    });
}

如果是大量小文件，建议用piscina库创建Worker池，避免频繁创建销毁Worker的开销。

三、优化MongoDB查询性能 #

注释掉图片查询后速度正常，说明DB查询也是瓶颈之一，做以下优化：

1. 添加复合索引：
   在Image模型中添加索引，让查询直接命中索引：

ImageSchema.index({ cloverDataName: 1, isCategory: 1 });

2. 简化查询条件（去掉多余的$or）：

async function getImageByName(names, isCategory) {
    const query = { cloverDataName: { $in: names } };
    if (isCategory) query.isCategory = isCategory;
    return Image.find(query);
}

3. 只查询需要的字段：
   减少MongoDB返回的数据量，只取匹配和解压必需的字段：

async function getImageByName(names, isCategory) {
    const query = { cloverDataName: { $in: names } };
    if (isCategory) query.isCategory = isCategory;
    return Image.find(query).select('cloverDataId imageData');
}

四、提前预解压或缓存结果 #

如果图片数据不频繁变动，从根源上避免重复解压：

1. 上传时预解压：
   在图片上传环节直接解压并存入DB，查询时无需再处理：

async function uploadImage(imageInfo) {
    const decompressed = LZString.decompressFromBase64(imageInfo.imageData);
    await Image.create({
        cloverDataName: imageInfo.name,
        cloverDataId: imageInfo.id,
        imageData: decompressed,
        isCategory: imageInfo.isCategory
    });
}

2. Redis缓存解压结果：
   对高频查询的图片，缓存解压后的结果，过期时间根据图片更新频率设置：

const redis = require('redis');
const client = redis.createClient();

async function getDecompressedImage(imageId, base64Data) {
    const cached = await client.get(`image:${imageId}`);
    if (cached) return cached;
    
    const decompressed = LZString.decompressFromBase64(base64Data);
    await client.setEx(`image:${imageId}`, 86400, decompressed); // 缓存1天
    return decompressed;
}

五、API数据返回策略优化 #

如果前端不需要一次性加载所有数据，采用分批或按需加载：

1. 分页返回：
   修改服务函数支持分页参数，每次只返回20-50条数据：

async function getAllItemsByCategoryWithImages(category_id, page = 1, limit = 20) {
    // ... 原有获取itemsResponse的代码
    const startIndex = (page - 1) * limit;
    const paginatedItems = itemsResponse.slice(startIndex, startIndex + limit);
    return await this.matchItemImages(paginatedItems, images);
}

2. 前端按需请求图片：
   主API只返回图片ID，前端需要时再单独请求图片数据：

async function matchItemImages(items, images) {
    const imagesById = new Map(images.map(image => [image.cloverDataId, image._id]));
    items.forEach(item => {
        item.imageId = imagesById.get(item.id);
    });
    return items.sort((a, b) => {
        const textA = a.name.toUpperCase();
        const textB = b.name.toUpperCase();
        return textA.localeCompare(textB);
    });
}

再创建单独的/images/:idAPI返回解压后的图片数据，前端用懒加载方式加载。

内容的提问来源于stack exchange，提问作者coder123