ArkUI Inspector是DevEco Studio提供的布局分析工具，可用于查看应用在真机上的UI显示效果，能够快速分析定位状态变量、组件嵌套层次、UI界面布局存在的问题等。
冷启动：Launch分析是DevEco Profiler工具提供的冷启动场景性能分析能力，可以拆解应用冷启动过程，抓取不同阶段的耗时数据，帮助开发者快速分析启动过程的耗时瓶颈，识别出导致启动缓慢的原因。
Timer（定时器）功能支持按照指定的时间执行对应函数，通过setTimeout设置指定时间。

问题定位

使用ArkUI Inspector分别抓取引导页和登录页的布局，得知两个页面分别是SplashPage和LoginPage。
使用DevEco Profiler中的Launch模板抓取应用启动时的Trace，分别搜索SplashPage和LoginPage的创建时间，搜索关键字H:Create[XXXPage]。发现两个页面创建时间间隔10s左右，期间应用包名主线程长时间Sleeping，基本没有进行任何处理，且多次复现后发现SplashPage和LoginPage两个页面创建时间稳定在10s左右。因此推测是应用侧设置了固定的跳转时间。

如以下示例代码，由于设置了闪屏页10s延迟跳转登录页，造成启动后停留引导页过久的问题。

import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct LongSplashPage {
  message: string = `我是闪屏页，10秒后我将跳转登录页`;

  onPageShow(): void {
    setTimeout(() => {
      this.getUIContext().getRouter().pushUrl({
        url: 'pages/Index' // 目标url
      }).catch((error: BusinessError) => {
        console.error(`jump error: ${error.code}, ${error.message}`);
      });
    }, 10000); // 设置10s后跳转
  }

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('LongSplashPageHelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.message = 'Welcome';
        });
    }
    .height('100%')
    .width('100%');
  }
}

分析结论

应用通过定时器设置了从闪屏页跳转登录页的固定时间，这个固定时间过长造成了在闪屏页的停留时间过长。

修改建议

应用酌情减少定时器设置的时间，避免用户长时间等待。

闪屏页设置：

@Entry
@Component
struct ShortSplashPage {
  message: string = `我是闪屏页，5秒后我将跳转登录页`;

  onPageShow(): void {
    setTimeout(() => {
      this.getUIContext().getRouter().pushUrl({
        url: 'pages/Index' // 目标url
      }).catch((error: BusinessError) => {
        console.error(`jump error: ${error.code}, ${error.message}`);
      });
    }, 5000); // 设置5s后跳转
  }

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('ShortSplashPageHelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.message = 'Welcome';
        });
    }
    .height('100%')
    .width('100%');
  }
}

登录页：

@Entry
@Component
struct Index {
  @State message: string = '我是登录页';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.message = 'Welcome';
        });
    }
    .height('100%')
    .width('100%');
  }
}

应用内浏览文档上滑时不流畅

动态变化的页面卡住一段时间无变化

意见反馈

以上内容对您是否有帮助？

意见反馈

如果您有其他疑问，您也可以通过开发者社区问答频道来和我们联系探讨。

社区提问 AI 助手提问