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

#### 问题现象

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

#### 背景知识

*   Web：可用于在应用程序中显示Web页面内容的组件。
*   ArkUI Inspector：DevEco Studio提供的布局分析工具，开发者可以借助它预览真机或模拟器中的UI效果，快速定位布局层级问题，也可以观察组件属性、不同组件之间的关系等。
*   DevEco Profiler：集成在DevEco Studio中的性能调优工具，提供场景化的性能调优功能体验，可以检测应用的性能指标、录制Trace信息，通过分析Trace数据能够发现代码中的性能瓶颈，进而优化性能，更多详细内容可看使用Profiler进行性能调优。
*   DevTools：一个Web前端开发调试工具，提供了电脑上调试移动设备前端页面的能力。开发者通过setWebDebuggingAccess(true)开启Web组件前端页面调试能力，利用DevTools工具可以在电脑上调试移动设备上的前端网页，更多详细内容可以看使用DevTools工具调试前端页面。

#### 问题定位

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%')
      }
    }
    ```