Flutter&Node.js多网络图片高效缓存：排行榜图片性能优化问询

我开发了一个展示Top10玩家的排行榜页面，目前在图片高效处理上遇到问题。当前服务器以base64格式向客户端发送玩家图片，客户端将其解码为Uint8List后通过Image.memory展示。该方案虽能运行，但对性能、内存占用及服务器资源造成负面影响。我尝试使用cached_network_image，却导致大量请求引发服务器过载，请问是否存在更高效的图片获取与展示方案？

服务端代码（Node.js） #

async function getLeaderboards(limit, offset) {
    try {
        const result = await pool.query('SELECT img, username, coins, gems FROM users ORDER BY coins DESC LIMIT ? OFFSET ?', [limit, offset]);

        // Modify the result to set img to null if it doesn't exist
        for (const user of result) {
            if (!isValidImage(user.img)) {
                user.img = null;
            }
        }

        return result;
    } catch (err) {
        console.log(err);
        throw err; // Propagate the error
    }
}

router.post('/leaderboards', checkTokenMiddleware, leaderboardsValidator, async (req, res) => {
    try {
        const { limit, page } = req.body;
        const offset = (page - 1) * limit;

        const leaderboards = await getOrSetCache(`leaders?p=${page}`, async () => {

            const errors = validationResult(req);
            if (!errors.isEmpty()) {
                res.status(400).json({ errors: errors.array() });
                return;
            }

            return await getLeaderboards(limit, offset);
        });

        // Prepare leaderboards data with base64-encoded images
        const leaderboardsWithImages = [];
        for (const user of leaderboards) {
            if (user.img !== null) {
                const filePath = path.join(__dirname, '..', '..', 'uploads', user.img);
                const fileData = fs.readFileSync(filePath, { encoding: 'base64' });
                const base64Image = `data:image/jpg;base64,${fileData}`;
                leaderboardsWithImages.push({ ...user, img: base64Image });
            } else {
                leaderboardsWithImages.push({ ...user });
            }
        }

        // Send the leaderboards data with images embedded as base64 strings
        res.status(200).json(leaderboardsWithImages);
        console.log(leaderboardsWithImages)
    } catch (err) {
        handleDatabaseError(res, err);
    }
});

服务器返回示例 #

[{
    "img": "data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL....190834 more characters",
    "username": "hala",
    "coins": 110,
    "gems": 5
  }]

Flutter端代码 #

Future<List<dynamic>?> fetchAPIData() async {
    try {
     
      final response = await serv.postRequest(
        APIConstants.kLeaderboards,
        showLoading: false,
        {'page': page, 'limit': limit},
      );

      if (response.isEmpty) {
        hasMorePages = false;
        update();
      }

      for (var item in response) {
        leaderboardData!.add(Leaderboards.fromMap(item));
      }

      page++;
      update();
      return leaderboardData;
    } catch (e) {
      logger.e("Error fetching leaderboard API data: $e");
      return null;
    }
  }

  Uint8List base64ToUint8List(String base64String) {
    return base64.decode(base64String.split(',').last);
  }
// 在ListView.builder中展示
Image.memory( ctr.base64ToUint8List(imgFile),fit: BoxFit.cover)

优化方案 #

1. 服务端改造：返回图片静态访问路径 #

• 移除接口中转base64的逻辑，直接返回数据库存储的图片文件名或拼接好的相对路径，比如/uploads/hala_avatar.jpg
• 用Nginx或服务器静态托管功能，让uploads目录可通过HTTP直接访问，最终图片URL为https://你的域名/uploads/hala_avatar.jpg
• 改造后接口返回示例：

  [{
      "img": "/uploads/hala_avatar.jpg",
      "username": "hala",
      "coins": 110,
      "gems": 5
    }]
  

2. 服务端添加缓存与限流 #

• 给图片请求设置HTTP缓存头：Cache-Control: public, max-age=86400，让客户端、CDN缓存图片，减少重复请求
• 用express-rate-limit等工具配置限流，限制单IP的图片请求频率，避免服务器过载

3. Flutter端合理使用缓存 #

• 继续使用cached_network_image，增加缓存配置优化：

  CachedNetworkImage(
    imageUrl: "https://你的域名${item.img}",
    fit: BoxFit.cover,
    placeholder: (context, url) => CircularProgressIndicator(strokeWidth: 1),
    errorWidget: (context, url, error) => Icon(Icons.person),
    cacheManager: CacheManager(
      Config(
        "avatar_cache",
        stalePeriod: Duration(days: 7), // 缓存7天
        maxNrOfCacheObjects: 50, // 最多缓存50张头像
      ),
    ),
  )
  

• 利用ListView的懒加载特性，仅当图片进入视口才开始加载，减少初始请求量

4. 图片预处理优化 #

• 上传图片时自动压缩到合适尺寸（比如200x200px），排行榜头像不需要高清大图
• 转换为WebP格式，同等画质下体积比JPG小30%-50%，加载更快

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