跳到主要内容

性能与体验优化 ✅

覆盖首屏、列表、图片与动画、弱网离线、度量与优化闭环。

首屏优化如何落地？​

答案

核心概念:

减小 Bundle/资源体积、并发准备关键数据、骨架与占位、延迟非关键初始化；Hermes 提升启动。

示例说明:

分离懒加载 → 骨架 → 关键数据优先 → 次要延迟

面试官视角:

  • 要点清单: 体积/网络/计算
  • 加分项: 指标 TTI/FP 量化
  • 常见失误: 同步初始化过多

延伸阅读:

  • Performance 文档

列表/滚动性能如何优化？​

答案

核心概念:

FlatList/SectionList 配置窗口与回收，getItemLayout，避免匿名函数与频繁 setState；大列表虚拟化。

示例说明:

<FlatList windowSize={5} removeClippedSubviews getItemLayout={...} />

面试官视角:

  • 要点清单: 窗口化；去抖；避免重渲染
  • 加分项: Memo/Key 提升；骨架/占位
  • 常见失误: 列表项闭包创建函数

延伸阅读:

  • 列表文档

图片与资源加载如何优化？​

答案

核心概念:

缓存、渐进、并发控制、CDN 规格；避免原图；预取关键图。

示例说明:

<Image source={{ uri }} defaultSource={placeholder} />

面试官视角:

  • 要点清单: 缓存/CDN；并发
  • 加分项: 预取与占位
  • 常见失误: 大图直出

延伸阅读:

  • Image 组件

动画与手势如何保证流畅？​

答案

核心概念:

原生驱动(Reanimated/GestureHandler) 代替 JS 驱动；中断与回弹策略；避免主线程阻塞。

示例说明:

// Reanimated worklet（示意）

面试官视角:

  • 要点清单: 原生驱动；中断管理
  • 加分项: 复杂手势联动
  • 常见失误: JS 循环驱动动画

延伸阅读:

  • Reanimated/Gesture docs

弱网与离线体验如何设计？​

答案

核心概念:

超时/重试/退避、离线缓存、网络状态订阅与提示；幂等与冲突解决。

示例说明:

// NetInfo 监听（示意）

面试官视角:

  • 要点清单: 弱网策略；离线提交
  • 加分项: 一致性；回放
  • 常见失误: 仅失败重试

延伸阅读:

  • NetInfo

性能度量与优化闭环如何建立？​

答案

核心概念:

关键指标(首屏/掉帧/内存/错误率)，采集 → 看板 → 告警 → 灰度 → 回归测试的闭环。

示例说明:

Flipper + Sentry/Crashlytics + 自建埋点平台

面试官视角:

  • 要点清单: 指标体系；自动化
  • 加分项: A/B 与基线
  • 常见失误: 无基线阈值

延伸阅读:

  • Flipper/Sentry/Crashlytics