目录

打开隐私政策页面，隐私政策内容加载慢

问题现象

打开隐私政策时，隐私政策内容加载慢，过一段时间才显示出来。

背景知识

问题定位

  1. 使用ArkUI Inspector抓取隐私政策界面布局，发现隐私政策采用Web组件显示，因此隐私政策内容加载涉及Web网页加载。
  2. 使用DevEco Profiler ArkWeb工具抓取隐私政策内容加载过程的Trace信息，查看ArkWeb泳道的信息，可知加载耗时主要集中在网页子资源下载和渲染部分。

    查看应用的Web渲染线程，发现耗时集中在H:EvaluateScript和H:v8.callFunction，网页加载时JS编译与执行耗时较多，与网页有关。

  3. 使用DevTools录制隐私政策内容加载情况，可看到隐私政策页面加载的JS、CSS文件较多，脚本编译和执行耗时达到1.2s，脚本代码逻辑复杂，导致隐私政策内容加载慢。

分析结论

隐私政策采用网页方式加载显示时，加载的JS、CSS文件较多，脚本代码逻辑复杂，脚本编译和执行耗时较多，导致隐私政策内容加载慢。

修改建议

  1. 减少不必要的JS、CSS文件加载或延迟加载，优化网页脚本代码处理逻辑。
  2. 增加加载中动效。
    import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct PrivacyPage {
  webviewController: WebviewController = new webview.WebviewController();

  @State isLoading: boolean = true;

  build() {
    Stack() {
      Web({
        src: $r('app.string.test_url'), // 测试时请替换成实际地址
        controller: this.webviewController,
      }).onPageEnd(() => {
        this.isLoading = false;
      })
        .fileAccess(false)
        .geolocationAccess(false)
      if(this.isLoading) {
          LoadingProgress()
            .width(100)
            .height(100)
      }
    }
    .height('100%')
    .width('100%')
  }
}