前端性能优化常见误区
前端性能优化常见误区：包体积迷信、缓存万能论、SSR 银弹、memo 滥用、Lighthouse 高分陷阱。
#type / synthesis
#status / evergreen
#tech / dev / frontend
[!info] related notes
前端性能优化常见误区
范围
前端性能优化如果缺乏系统认知，容易陷入”技术洁癖”或”感觉优化”。本笔记总结常见误区，帮助建立正确认知。
误区 1：性能优化就是减少包体积
包体积只是其中一部分。很多卡顿来自：
- 运行时渲染（重排重绘）
- 框架状态更新过于频繁
- 主线程长任务阻塞
- 大列表直接渲染全部节点
不是把包弄小就能解决所有问题。
误区 2：用了缓存就万事大吉
缓存不合理会带来：
- 脏数据、用户体验不一致
- 内存膨胀（SPA 长期运行）
- 更新不及时、用户看到过期内容
- 缓存穿透/击穿
缓存是”双刃剑”，要设计合理的缓存策略和淘汰机制。
误区 3：所有页面都追求 SSR
渲染模式要看业务类型：
- 营销页：SSG 最优
- 内容详情页：SSR 合适
- 强交互后台：CSR + 拆包 + 缓存
- 混合场景：岛屿架构、流式渲染
不是所有页面都该用同一种方案。
误区 4：用了 memo/useMemo/useCallback 就优化了
这些工具有成本：
- 维护成本：引用稳定性需要额外管理
- 计算成本：memo 本身有对比开销
- 用错了可能更慢
正确的用法是”避免不必要重复渲染”，而不是”到处加 memo”。
误区 5：优化就是把 Lighthouse 跑高分
Lighthouse 高分 ≠ 真实用户体验好：
- 实验室网络 vs 真实用户网络
- 高端设备 vs 低端机
- 单一场景 vs 复杂交互
真正目标是用户真实体验和业务收益，不是技术指标。
最短记忆方式
- 包体积只是”优化”的一部分
- 缓存要设计淘汰策略
- SSR 不是万能的
- memo 用错比不用更糟
- Lighthouse 高分不等于用户体验好