点击切换页面完成时延性能优化案例

• 场景描述
• 目标规则
• 使用性能检测工具检测性能问题
• 优化方案及优化收益

场景描述

通过性能测试工具测试发现，某应用首页点击某条新闻页面切换完成时延1327ms，应用内点击操作完成时延推荐值为900ms，差距400+ms。如果不通过性能测试工具集进行分析，开发者需要：复现问题、抓取trace、分析trace，找出丢帧问题点，操作步骤多，耗时较长。

本场景通过应用体检工具进行问题发现、定位及修改。

目标规则

针对页面转场完成时延的场景，应用体检工具有针对性的体检规则，再结合VIP页面是采用web加载的业务背景，我们选择的目标体检工具检测规则如下：

• 页面内点击操作完成时延快速检测：应用内点击操作完成时延应≤1600毫秒，这条规则的优势是可以由开发者自行手动操作关注的目标页面，避免工具自动扫描一些开发者不关注的页面浪费时间，参考文档：应用内点击操作完成快。
• web组件初始化耗时检测：应用web页面加载场景下，web组件初始化时间不超过25ms，参考文档：规则总览-最佳实践。
• web执行js耗时检测：应用web页面加载场景下，web页面单个js编译时间不超过30ms，单个js运行时间不超过30ms，总体js执行时间不超过300ms，参考文档：规则总览-最佳实践。
• web主资源下载耗时检测：应用web页面加载场景下，web主资源下载时间不超过300ms，参考文档：规则总览-最佳实践。
• web子资源下载耗时检测：应用web页面加载场景下，web单个子资源下载时间不超过200ms，参考文档：规则总览-最佳实践。

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

选择Benchmark，快速性能测试勾选页面内点击操作完成时延快速检测，最佳实践勾选web组件初始化耗时检测、web执行js耗时检测、web主资源下载耗时检测、web子资源下载耗时检测。启动检测后工具会自动拉起应用并在首页停留，接下来由开发者手动操作手机界面来复现点击VIP按钮跳转到VIP界面的场景。

开发者原场景复现结束后，点击结束按钮输出体检报告，报告结果显示在3个检查规则检测不通过：

1. web主资源下载耗时长。

   

   体检报告结果显示，新闻页面的主资源下载耗费了314ms以上，这是第一个重点需要考虑的优化点。

2. web子资源下载耗时长。

   

   体检报告结果显示，新闻页面存在耗时347ms以上的子资源下载，这是第二个重点需要考虑的优化点。

3. js编译耗时长。

   

   体检报告结果显示，新闻页面某js文件编译耗时超过了52ms，是TOP编译耗时，需要重点考虑优化，其它的优先级不高，先不考虑。

从web页面加载的整个流程可以看到，主资源下载，子资源下载，js编译都是加载流程中的环节，对这3个环节的优化能够对整个新闻页面加载完成时延带来性能收益。

优化方案及优化收益

针对主资源下载耗时长和子资源下载耗时长，体检报告提供了预下载、预渲染的优化建议，可以在冷启动或者首页提前下载新闻页面的资源，甚至提前渲染新闻页面，性能收益预期达到数百毫秒，参考文档：预下载优化。

针对js编译耗时长，体检报告里提供了预编译JavaScript生成字节码缓存（Code Cache）的优化建议，可以在首页预编译新闻页面使用到的js文件资源，预期可以获得53ms的性能优化收益，参考文档：预编译JavaScript生成字节码缓存（Code Cache）。