应用查看课程详情完成时延性能优化工具使用案例

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

场景导入

通过性能工具扫描发现，应用查看课程详情耗时过长，超过了7s。但由于业务问题，不允许多端同时进入同一课程看课，不能在首页进行鉴权，否则会把其它正在学习课程的端挤下线，本场景通过采用应用体检工具进行问题发现、定位及修改。

目标规则

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

• 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子资源下载耗时检测。启动检测后工具会自动拉起应用并在首页停留，接下来由开发者手动操作手机界面点击首页课程列表，跳转到课程详情页

检测报告给出web性能优化指导文章，根据文章指引结合业务背景，分析可以做预渲染优化：开发者额外创建一个新的ArkWeb组件，并在后台对其进行预渲染，此时该组件并不会立刻挂载到组件树上，即不会对用户呈现(组件状态为Hidden和InActive)，开发者可以在后续使用中按需动态挂载。

优化方案及优化收益

开发者在首页初始化一个about://blank的空白web组件，在点击跳转后把空白页替换为课程详情页，采取这种方案进行性能优化。根据页面加载完成时延的检测标准，重新抓取trace并在trace上找到完成时延结束的起止点即可算出完成时延的估算值，结合应用业务特征，完成课程详情加载完成时延的终点是自定义加载弹窗destroy。

记录数据并计算可得同设备同网络的情况下，优化前方案的五次测试均值为7802ms，优化后方案的五次测试均值为6396ms，优化性能收益大约在1400ms+。

<p id="p983855523415"><span>测试次数</span></p>	<p id="p883845518342"><span>优化前完成时延</span></p>	<p id="p883817552343"><span>优化后完成时延</span></p>	<p id="p20838115516342"><span>优化收益</span></p>
<p id="p550071873512"><span>1</span></p>	<p id="p2500151817358"><span>8117ms</span></p>	<p id="p750012181352"><span>6130ms</span></p>
<p id="p185011018143514"><span>2</span></p>	<p id="p16501118163517"><span>7003ms</span></p>	<p id="p6501161863520"><span>5608ms</span></p>
<p id="p2050117187350"><span>3</span></p>	<p id="p12501141812355"><span>6370ms</span></p>	<p id="p195011918103512"><span>5692ms</span></p>
<p id="p115011718203517"><span>4</span></p>	<p id="p1850161814358"><span>6946ms</span></p>	<p id="p11501191803512"><span>6180ms</span></p>
<p id="p115011518133516"><span>5</span></p>	<p id="p15501101817359"><span>10574ms</span></p>	<p id="p125011718193510"><span>8370ms</span></p>
<p id="p8501131812356"><span>均值</span></p>	<p id="p85012182359"><span>7802ms</span></p>	<p id="p2501218193514"><span>6396ms</span></p>	<p id="p11501518113518"><span>1406ms</span></p>