React与Node API调用性能优化咨询：前后端代码优化方案

算力阿峰

2026-5-8

前后端代码优化：提升性能与加载速度

各位开发者好！我想咨询前后端代码优化的最佳实践，以提升性能与加载速度。以下是我的实现代码：

后端Node.js代码：

router.get("/get-followers/new/:id", async (req, res, next) => { try { const user = await User.findById(req.params.id); if (!user) return res.status(404).send("User not found..."); let following = [...user.following]; let users = await User.find({ 'name': { $in: following } }).select('name profilePic photos'); res.send(users); } catch (ex) { console.error(ex); next(); } });

前端React代码：

const getUsers = async (end) => { try { if (context.curUser._id) { const { data } = await http.get(`${config.apiEndpoint}/followers/get-followers/new/${context.curUser._id}`); data.map(user => { user.photos.reverse(); }); const newPhotos = []; data.map(user => { user.photos.map(photo => { let curPhoto = { profilePic: user.profilePic.data, user: { name: user.name, _id: user._id }, photo: { data: photo.data, contentType: photo.contentType, likes: photo.likes, date: photo.date, comments: photo.comments, _id: photo._id } }; newPhotos.push(curPhoto); }) }); newPhotos.sort((a, b) => a.photo.date < b.photo.date); if (slice > newPhotos.length) { setShowLoad(false) }; const slicedPhotos = newPhotos.slice(0, end); setUsers(slicedPhotos); } else { return } } catch (ex) { console.error('Something went wrong while getting feed.'); } };

当前代码可正常运行，但页面加载耗时约3秒，想请教前后端是否存在可优化的问题，以及如何实现更快的加载速度？

嘿，很高兴能帮你梳理优化点！咱们从后端和前端分别来看看怎么把加载速度提上去：

后端优化方案

优化数据库查询效率
你现在用name作为$in查询的条件，建议给name字段添加MongoDB索引，不然会触发全表扫描，速度很慢。如果你的user.following存储的是用户ID而非用户名，那直接用_id查询会更高效（_id默认自带索引），修改查询条件为：
```
let users = await User.find({ '_id': { $in: following } }).select('name profilePic photos');
```
另外，在查询时加上.lean()方法，跳过Mongoose的文档实例转换，直接返回普通JS对象，能大幅减少内存开销和查询时间：
```
const user = await User.findById(req.params.id).lean();
let users = await User.find({ '_id': { $in: following } }).select('name profilePic photos').lean();
```

提前聚合处理数据，减少前端计算
目前前端需要把所有用户的照片合并、排序，这部分逻辑可以放到后端用MongoDB聚合管道完成，减少前端的数据处理压力和传输量。比如：

const feedPhotos = await User.aggregate([
  // 匹配当前用户关注的用户
  { $match: { _id: { $in: following.map(id => mongoose.Types.ObjectId(id)) } } },
  // 展开photos数组
  { $unwind: '$photos' },
  // 按照片日期倒序排序
  { $sort: { 'photos.date': -1 } },
  // 只保留需要的字段，避免冗余数据
  { $project: {
      name: 1,
      profilePic: 1,
      'photos.data': 1,
      'photos.contentType': 1,
      'photos.likes': 1,
      'photos.date': 1,
      'photos.comments': 1,
      'photos._id': 1
    }
  },
  // 可选：直接限制返回数量，实现分页
  { $limit: end }
]);
res.send(feedPhotos);

这样前端拿到的就是已经排序好的单条照片数据，不用再做多层map和排序了。

完善错误处理
当前错误处理只是打印日志并调用next()，建议明确返回500状态码，让前端能准确识别服务器错误：
```
catch (ex) {
  console.error(ex);
  res.status(500).send('Server error occurred');
}
```

前端优化方案

减少前端计算开销
把数据合并、排序的逻辑转移到后端后，前端可以省去data.map(user => user.photos.reverse())、多层map和排序的步骤，直接使用后端返回的结构化数据，大幅减少初始加载时的CPU计算时间。
优化图片加载
你现在直接传递图片的data（看起来是base64或二进制数据），base64会比普通图片大30%左右，且无法利用浏览器缓存。建议后端单独提供图片接口，返回图片流并设置缓存头，前端用<img src="/api/photos/${photoId}" />的方式加载，这样能利用浏览器缓存，还能实现懒加载。
实现分页/滚动加载
目前你是一次性获取所有数据再slice，初始加载数据量太大。结合后端的$limit和$skip（或用游标分页），前端每次只请求当前需要的20-30条数据，滚动到底部时再请求下一页，能显著降低初始加载时间。

优化状态更新与代码简洁性

用flatMap代替两次map+push，简化代码同时提升效率：

const newPhotos = data.flatMap(user => 
  user.photos.map(photo => ({
    profilePic: user.profilePic.data,
    user: { name: user.name, _id: user._id },
    photo: { ...photo }
  }))
);

用useMemo缓存处理后的数据，避免每次渲染重复计算：

const processedPhotos = useMemo(() => {
  // 这里放数据处理逻辑
}, [data]);

排序逻辑优化：如果date是时间戳，用数值比较更准确高效：
```
newPhotos.sort((a, b) => b.photo.date - a.photo.date);
```

避免重复请求
添加loading状态，防止用户多次触发请求时重复发送相同的API调用：

const [isLoading, setIsLoading] = useState(false);
const getUsers = async (end) => {
  if (isLoading) return;
  setIsLoading(true);
  try {
    // 请求逻辑
  } finally {
    setIsLoading(false);
  }
};

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

React与Node API调用性能优化咨询：前后端代码优化方案

后端优化方案 #

前端优化方案 #

后端优化方案

前端优化方案