首页滑动丢帧性能优化案例

场景分析

通过性能测试工具测试发现，某应用首页存在滑动丢帧问题。如果不通过性能测试工具集进行分析，开发者需要：复现问题、抓取trace、分析trace，找出丢帧问题点，操作步骤多，耗时较长。

本场景通过采用静态检查工具进行问题发现、定位及修改。

目标规则

首页滑动是典型的长列表滑动场景，根据经验通过对接组件复用可大幅提升帧率，我们选择的目标Code Linter检测规则是@performance/hp-arkui-use-reusable-component，在长列表滑动的过程中，如果ListItem组件复杂，尽量使用组件复用，滑动丢帧场景下，建议优先修改，参考文档：​​@performance/hp-arkui-use-reusable-component​​。

使用性能检测工具检测性能问题

打开静态检查工具 Code Linter，点击扫描本工程，扫描出总问题数“698”个，基于扫描结果文件，在“RuleName”列过滤出“

@performance/hp-arkui-use-reusable-component”规则相关的代码问题点，见下图：

通过“Source File”列可以看到具体的页面文件及其对应的代码行，进一步点开后，可以分析出对应的组件没有使用组件复用，主要有首页中的ComXXX子组件，首页中的ChildCommentItem子组件等。

优化方案及优化收益

通过体检结果中提供的赋能套件链接跳转到组件复用使用指导：​​组件复用​​。根据文档指导完成组件复用适配修改后，再通过静态检查工具检查，无此问题。性能工厂对比优化前后两次结果数据可以看到滑动卡顿有1帧的优化提升。