Open-Ani项目收藏功能性能优化实践

在开源动漫资源管理工具Open-Ani的开发过程中，收藏模块的加载性能问题曾成为影响用户体验的关键瓶颈。本文将从技术视角剖析该问题的成因及解决方案，为同类场景的性能优化提供参考。

问题现象与定位

当用户访问收藏夹时，界面响应出现明显延迟，加载时间超过3秒。通过Chrome DevTools的Performance面板分析，发现主要耗时集中在以下两个阶段：

1. 数据查询阶段：后端接口响应时间达1.8秒
2. 渲染处理阶段：前端列表渲染耗时1.2秒

进一步分析发现收藏数据采用全量拉取策略，即使用户只浏览前20条记录，系统仍会加载全部收藏条目（平均单用户收藏量约500+）。

技术解决方案

后端优化：分页查询改造

原始实现采用MongoDB的find()直接查询完整数据集：

// 原实现
Collection.find({ userId }).exec()

优化后引入分页参数处理：

// 新实现
Collection.find({ userId })
  .skip((page - 1) * size)
  .limit(size)
  .lean()
  .exec()

关键改进点：

• 添加数据库索引：为userId字段创建复合索引
• 使用lean()跳过Mongoose文档实例化
• 实现游标分页替代传统分页（针对超大数据集）

前端优化：虚拟滚动技术

采用react-window库实现列表虚拟化：

import { FixedSizeList as List } from 'react-window'

const Row = ({ index, style }) => (
  <div style={style}>{items[index].title}</div>
)

<List height={600} itemCount={1000} itemSize={35} width={300}>
  {Row}
</List>

同步优化措施：

1. 图片懒加载：Intersection Observer API实现视口外图片延迟加载
2. 请求合并：将收藏项的状态检查请求合并为批量查询
3. 内存缓存：对已加载的分页数据建立LRU缓存

性能对比

优化前后关键指标对比：

指标	优化前	优化后
首屏加载时间	3200ms	480ms
内存占用峰值	45MB	12MB
滚动流畅度(FPS)	8-12	55-60

经验总结

1. 数据量预判原则：对于用户生成内容(UGC)系统，必须预设单用户数据可能达到的量级
2. 渐进式加载策略：优先加载可视区域内容，后续数据按需加载
3. 前后端协同优化：性能问题往往需要全链路分析，不能孤立看待

该优化方案已稳定运行在Open-Ani生产环境，后续计划加入Web Worker处理复杂计算任务，进一步提升用户体验。