ShareChat 解决了卡顿问题，将 Feed 滚动量增加了 60%

简介

ShareChat 是印度领先的社交媒体平台，可让用户使用他们的母语分享观点、记录生活、结交新朋友。其他功能包括聊天室和私信功能，可让用户分享视频、笑话、歌曲和其他基于语言的社交内容。为了带头引领印度的互联网革命，ShareChat 正在改变下十亿用户在互联网上的互动方式。

应用数量

  • 下载量超过 1 亿
  • 月活跃用户数超过 1.8 亿
  • 超过 3200 万名内容创作者
  • 15 种不同的印度语言
  • 每天创建约 150 万个帖子

面临的挑战

随着 ShareChat 越来越受到每天成千上万用户的喜爱，该应用面临着持续提供新帧的挑战，而响应时间又短，影响了用户体验。

因此，该应用的丢帧或延迟帧（也称为“卡顿”）数量有所增加。通过改进呈现速度缓慢的帧和冻结的帧来解决这些问题对于向用户提供顺畅的体验至关重要。此外，这还具有重要作用，可以让用户在应用上花费更多时间，提高互动度，进而提高 ShareChat 在 Android Play 商店中的评分。

具体做法

ShareChat 与 Google 的开发者关系团队合作，通过改善了应用中的缓慢帧和冻结帧 (Jank) 来减少卡顿，从而对业务产生了积极的影响。具体而言，他们致力于改善了以下问题：

  • 共享 RecyclerView 池 - 通过分析，我们观察到创建不同的 ViewHolder 需要更长的时间。为尽量减少该过程，我们创建了一个共享 RecyclerView 池。这还有助于消除了针对类似 Feed 创建 ViewHolder 的费用。

  • 布局传递次数过多 - 通过分析，我们还发现，一些 ViewHolder 请求额外的 requestLayout。为了进行优化，代码已更新为具有创建时间（而非每个绑定）的价值，从而节省了额外的 requestLayout 成本。

  • OverDraw - 简化了布局，以减少分层并移除了为每个层单独设置的颜色。

  • 实现层次结构的扁平化 - 通过对许多屏幕进行分析和手动检查，观察到长时间膨胀。为了解决此问题，使用 ConstraintLayout 对层次结构进行了扁平化处理。

  • View Inflation（视图膨胀过多） - 在进行性能分析时，找出某些视图的较长膨胀时间。这些 View 已转换为 Viewstub。

  • 从界面线程中移除密集型任务 - 使用性能分析器可以观察多个在主线程上执行密集任务的位置，例如创建带有每个 recyclerView 绑定的标记和样式的 SpannableStringBuilder、BlurHash 解码等。这些任务已从界面线程中移除并移至后台线程。

  • 从 Rx 迁移到协程 - 内存消耗也会导致频繁的 GC 调用，并且 RX 线程数量超过 100 时线程数量非常高。许多用例已移至协程中，以解决这些问题。

  • 采用 Coil 进行图片加载 - Glide 会在加载图片时引发问题，特别是在通过 Jetpack Compose 构建的组件中时。我们还发现，在 LazyColumn 中加载图片时，呈现阈值条很高。这些情况促成了客户采用 Coil 进行图片加载。

  • 旧的代码清理和重构 - 移除旧的代码和实验有助于从界面中移除不必要的隐藏视图，并且有助于以更好的方式重写部分界面。

成果

通过分析有待改进的方面并确定优化策略，ShareChat 能够提升用户的整体体验，同时提高互动率和 Play 商店评分。以下是 ShareChat 取得的成效的定量概述 -

  • Play 商店中的“呈现速度缓慢”帧减少了约 45%
  • Play 商店中的“冻结”帧减少了约 30%
  • 每渲染 10K 帧的卡顿帧速率从 10.72% 降至 3.98%
  • 动态消息滚动次数增加了 60%
  • Google 商店的总体评分从约 4.0 提高到 4.3
  • 帖子浏览量增加了 10%

“ShareChat 的目标是打造出令用户满意的最佳社交媒体应用。这也意味着，在应用性能方面也要达到最佳水平。 我们与 Google 开发者关系团队通力协作，帮助我们确定了针对我们最常用的低端用户设备需要改进的方面。我们学习了各种最佳性能做法和工具，能够识别和解决冻结的帧、卡顿、过度绘制和 ANR 问题。”

- Vihaan Verma，ShareChat Android 团队工程经理