HarmonyOS 实战开发 —— 首页滑动丢帧性能优化案例

---

📚往期笔录记录🔖：

🔖鸿蒙（HarmonyOS）北向开发知识点记录~
🔖鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
🔖嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
🔖对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
🔖鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
🔖记录一场鸿蒙开发岗位面试经历~
🔖持续更新中……

---

场景分析

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

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

目标规则

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

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

打开静态检查工具 Code Linter，点击扫描本工程，扫描出总问题数“698”个，基于扫描结果文件，在“RuleName”列过滤出“@performance/hp-arkui-use-reusable-component”规则相关的代码问题点，见下图：

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

优化方案及优化收益

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