目录

ArkUI页面加载慢

问题现象

用户在点击应用查看详情页面时，有时会遇到较长的等待时间，存在页面加载慢的问题。

背景知识

问题定位

以打开某新闻类应用的新闻信息过程中，显示加载时间长问题为例，定位过程如下：

  1. 点击页面内容开始加载新页面后，长时间显示加载页，使用ArkUI Inspector工具抓取加载过程的布局，发现加载页是一个Loading组件。当该加载页消失后会显示出应用新闻详情页，因此该加载流程的起始点为手指离开屏幕、加载页显示，结束点为加载页消失。

  2. 在Trace中搜索加载页创建、销毁或完成加载的Trace关键字来确定问题分析的范围。

    首先搜索创建Loading组件的Trace关键字H:CustomNode:BuildItem[Loading]，可看到应用在收到手指离开屏幕的事件中加载了DetailPage详情页面，之后创建了Loading组件显示。

    然后搜索销毁Loading组件的Trace关键字H:CustomNodeBase:Destroy[Loading]，最终划定的分析范围如下图所示。可看到应用在加载详情页面时，会触发页面跳转动画，然后发起http请求从云侧获取详情页的相关数据，最后将详情页面内容刷新显示出来，移除加载页，整体耗时1.0s。

    或者搜索Loading组件完成加载的Trace关键字H:ViewPU.viewPropertyHasChanged Loading loadingComplete 1。划定的分析范围如下图所示。可看到应用在创建组件后会发起http请求从云侧获取详情页的相关数据，请求完成后loadingComplete状态值改变为1，整体耗时16.3s。

  3. 从上述分析中，可看到页面加载完成耗时主要集中在http请求以及页面内容刷新。
    • http请求：在日志中搜索应用包名/NETSTACK关键字去分析http请求耗时，可看到耗时部分主要集中在服务器响应处理部分，服务器处理请求、数据传输耗时较多导致。
      07-08 20:44:39.812   34907-35118   C015B0/应用包名/NETSTACK  应用包名    I     [Http_exec.cpp:418] taskid=-2147483634, size:183, dns:0.170, connect:0.000, tls:0.000, firstSend:0.533, firstRecv:315.032, total:702.878, redirect:0.000, errCode:0, RespCode:200, HttpVer:3, method:GET, osErr:0
    • 页面内容刷新：通过查看该部分Trace关键字得知耗时集中在页面测量，主要在创建和测量ImageItem组件。

      通过ArkUI Inspector查看发现是推荐阅读列表，数了下该列表一共有80个ImageItem。ImageItem是应用的自定义组件，用于显示一则新闻的概要信息，该组件个数较多导致应用页面测量确认组件宽高耗时较多。

分析结论

修改建议