闲鱼App长列表滑动流畅度翻倍记

闲鱼App长列表滑动流畅度优化记

闲鱼作为国内flutter应用的先驱，APP以flutter和原生Native的混合工程存在。在业务的快速迭代过程中，app的长列表滑动流畅度逐步恶化，对用户浏览内容体验产生伤害。这里分别就Android原生、flutter页面和大家分享我们的优化思路和工程实践。

原生页面优化

1. 滚动卡顿排查

首先通过Systrace分析工具对导致滚动卡顿的场景进行了排查，发现问题主要集中在列表item创建和测量阶段。

2. 优化item创建和测量

对列表item的创建和测量阶段进行优化，主要做了以下几项工作：

• 减少item的嵌套层级。
• 避免在item的构造方法中进行耗时的操作。
• 使用ViewHolder复用item。
• 使用测量缓存。

3. 优化滑动过程

对滑动过程进行了优化，主要做了以下几项工作：

• 减少滑动过程中不必要的重绘。
• 使用FlingFlinger进行惯性滑动。
• 使用硬件加速。

Flutter页面优化

1. 滚动卡顿排查

通过分析工具对导致滚动卡顿的场景进行了排查，发现问题主要集中在flutter引擎的布局和渲染阶段。

2. 优化布局和渲染

对flutter引擎的布局和渲染阶段进行了优化，主要做了以下几项工作：

• 减少布局树的深度。
• 避免在布局过程中进行耗时的操作。
• 使用缓存来存储布局结果。
• 使用GPU加速来进行渲染。

3. 优化滑动过程

对滑动过程进行了优化，主要做了以下几项工作：

• 减少滑动过程中不必要的重绘。
• 使用FlingFlinger进行惯性滑动。
• 使用硬件加速。

工程实践

1. 优化工具和流程

为了确保优化的有效性和可持续性，我们建立了完善的优化工具和流程，包括：

• 性能测试工具。
• 性能监控工具。
• 性能优化流程。

2. 团队合作

优化工作涉及到多个团队，包括研发团队、测试团队和产品团队。我们通过建立跨团队的沟通机制，确保各团队能够协同工作，共同完成优化目标。

优化效果

经过一系列的优化工作，闲鱼App长列表滑动流畅度得到了显著提升，具体体现在以下几个方面：

• 滑动更加流畅，没有卡顿现象。
• 加载速度更快，列表item能够快速呈现。
• 功耗更低，续航时间更长。

总结

通过对原生页面和flutter页面的优化，我们成功地将闲鱼App长列表滑动流畅度翻了一倍。这不仅提升了用户浏览体验，也为其他开发者提供了借鉴。我们相信，通过持续的优化工作，闲鱼App将能够为用户提供更加流畅、高效和愉悦的体验。