跳到主要内容

性能、内存和资源泄漏

🚀 从可量化指标出发，定位 CPU、渲染、网络、内存与长期运行退化问题。

先定义问题​

  • 哪个指标变差：LCP、INP、CLS、FPS、CPU、Heap、流量
  • 发生在哪类设备、页面和操作路径
  • 是首次加载、交互瞬间还是长时间运行后出现
  • 基线与目标值分别是多少

常用工具​

  • Chrome Performance：主线程、长任务、Layout、Paint
  • Memory：Heap Snapshot、Allocation Timeline、Detached DOM
  • Network：资源体积、优先级、缓存和瀑布图
  • React Profiler / Vue Devtools：重复渲染与耗时组件
  • Lighthouse：用于线索，不替代真实用户数据

常见泄漏源​

  • 未移除的事件监听器与观察器
  • 未清理的定时器、订阅、WebSocket
  • 闭包长期引用大型对象或 DOM
  • 无上限增长的缓存、日志和历史记录
  • Detached DOM 被第三方库或全局变量持有

定位流程​

  1. 固定操作脚本并记录基线
  2. 重复执行操作，观察指标是否持续增长
  3. 获取前后 Heap Snapshot 并比较 Retained Size
  4. 从支配树沿引用链找到持有者
  5. 只修改一个变量并重新采样

优化原则​

  • 优先消除不必要工作，再考虑缓存
  • 避免强制同步布局和读写交错
  • 大列表使用虚拟化，重计算使用可控缓存
  • 拆分长任务，保证交互优先级
  • 图片、字体和脚本按真实瓶颈优化

回归验证​

  • 使用同一设备和脚本进行前后对比
  • 至少记录 3 次结果并关注波动
  • 长时间运行后 Heap 能回落
  • 优化未牺牲正确性和可访问性
  • 关键指标已加入持续监控