性能优化的本质是让用户更快地看到可用界面。抓手包括:避免不必要渲染、减少重排、提升网络与数据层效率等。

渲染层优化

使用 memouseMemouseCallback 避免重复渲染,合理切分组件与使用 key

列表与可视化

长列表使用虚拟化(如 react-window),图片使用懒加载与合适的尺寸。

数据层优化

缓存与请求合并、增量更新,后端提供分页与筛选,避免在前端进行昂贵计算。

度量与监控

通过性能指标(FCP/LCP/TTI)与监控平台定位瓶颈,持续改进。

优化是系统工程,关键在于度量与迭代。