ShareChat 解决卡顿问题,将信息流滚动流畅度提高 60%

简介

ShareChat 是印度领先的社交媒体平台,它允许用户用母语分享观点、记录生活和结交新朋友。其他功能包括聊天室和私信,使用户能够分享视频、笑话、歌曲及其他基于语言的社交内容。ShareChat 肩负着引领印度互联网革命的使命,正在改变下一个十亿用户在互联网上的互动方式。

应用数据一览

  • 1 亿多次下载
  • 1.8 亿多月活跃用户
  • 3200 多万内容创作者
  • 15 种不同的印度语言
  • 每日创建帖子约 150 万

挑战

随着 ShareChat 日渐受到成千上万用户的喜爱,该应用在持续提供新帧方面面临挑战,导致响应时间过长,影响了用户体验。

结果,应用出现大量掉帧或延迟帧(也称为“卡顿”)。通过改善缓慢和冻结帧来解决这些卡顿问题,对于为所有用户提供无缝体验至关重要。这也有助于让用户在应用上花费更多时间,提高用户参与度,进而提升 ShareChat 在 Android Play 商店中的评分。

他们如何做到

ShareChat 与 Google 的开发者关系团队合作,通过改善应用上的缓慢和冻结帧(卡顿),以减少卡顿并产生积极的业务影响。他们主要着手改进了以下问题:

  • 共享 RecyclerView 池 - 通过性能分析发现,创建不同的视图持有者(viewholder)耗时更长,为了尽量减少这种开销,创建了一个共享 RecyclerView 池。这还有助于消除类似信息流的视图持有者创建成本。

  • 过多的布局传递 - 通过性能分析还发现,一些视图持有者会请求额外的 `requestLayout` 操作。为了优化,代码已更新为在创建时获取值,而非每次绑定时获取,从而节省了额外的 `requestLayout` 成本。

  • 过度绘制 - 简化布局以减少层级,并移除为每个层单独设置的颜色。

  • 层级扁平化 - 通过对许多屏幕进行性能分析和手动检查,发现长时间的布局膨胀问题。为此,使用 ConstraintLayout 对层级进行了扁平化处理。

  • 过多的视图膨胀 - 在性能分析时,识别出某些视图的膨胀时间过长。这些视图被转换为 `viewstub`。

  • 将繁重任务从 UI 线程中移除 - 使用性能分析器可以观察到,有几处地方在主线程上执行了繁重任务,例如在每次 RecyclerView 绑定时创建带有标签和样式的 SpannableStringBuilder、BlurHash 解码等。这些任务已从 UI 线程中移除,并移至后台线程。

  • 从 Rx 迁移到 协程 - 内存消耗也导致频繁的垃圾回收(GC)调用,并且通过超过 100 个 Rx 线程导致线程数量非常高。许多用例都已迁移到协程以解决这些问题。

  • 采用 Coil 进行图片加载 - Glide 在加载图片时导致问题,特别是在通过 Jetpack Compose 构建的组件中。还发现,在 LazyColumn 中加载图片时,渲染阈值很高。这些情况促使他们采用了 Coil 进行图片加载。

  • 旧代码清理和重构 - 删除旧代码和实验性代码有助于从 UI 中移除不必要的隐藏视图,并有助于以更好的方式重写一些屏幕。

成果

通过分析改进领域并确定优化策略,ShareChat 能够改善用户的整体体验,同时提高其参与率和 Play 商店评分。以下是 ShareChat 取得的成果量化概览:

  • Play 商店中“慢渲染”帧减少约 45%
  • Play 商店中“冻结”帧减少约 30%
  • 每渲染 1 万帧的卡顿帧率从 10.72% 降至 3.98%
  • 信息流滚动流畅度提高 60%
  • 商店的整体评分从约 4.0 提高到 4.3
  • 帖子内容消费量增加 10%

“在 ShareChat,我们的目标是成为最能取悦用户的社交媒体应用。这也意味着在应用性能方面做到最好。我们与 Google 开发者关系团队的合作帮助我们找出了最常用低端用户设备上的改进领域。我们学习了最佳性能实践和工具,以识别和修复冻结帧、卡顿、过度绘制和 ANR 问题。”

—— Vihaan Verma,ShareChat Android 团队工程经理