# 应用首次启动，隐私政策内容加载延迟

#### 问题现象

首次打开应用，隐私政策内容加载慢，空白了一段时间后才显示。

#### 背景知识

*   ArkUI Inspector:
    
    ArkUI Inspector是DevEco Studio提供的布局分析工具，可用于查看应用在真机上的UI显示效果，能够快速分析定位状态变量、组件嵌套层次、UI界面布局存在的问题等。
    
*   DevTools:
    
    Web组件支持使用DevTools工具调试前端页面。DevTools是一个Web前端开发调试工具，提供了电脑上调试移动设备前端页面的能力。开发者通过setWebDebuggingAccess接口开启Web组件前端页面调试能力，利用DevTools工具可以在电脑上调试移动设备上的前端网页，设备需为4.1.0及以上版本。更多详细内容可参阅使用DevTools工具调试前端页面。
    
*   DevEco Profiler Launch分析：
    
    冷启动分析：Launch分析是DevEco Profiler工具提供的冷启动场景性能分析能力，可以拆解应用冷启动过程，抓取不同阶段的耗时数据，帮助开发者快速分析启动过程的耗时瓶颈，识别出导致启动缓慢的原因。
    
*   Web加载相关的Trace关键字:
    
    | 描述 | 线程 | Trace关键字 |
    | --- | --- | --- |
    | 应用收到手指离开屏幕的事件 | 应用主线程 | H:DispatchTouchEvent xxx type=1 |
    | web组件创建 | 应用主线程 | H:NWebImpl \| CreateNWeb |
    | 加载url | 应用主线程 | H:NavigationControllerImpl::LoadURLWithParams \| url= |
    | 开始加载网页 | 应用包名:render | H:NavigationBodyLoader::StartLoadingBody |
    | 网页加载完成 | 应用包名:render | H:RenderFrameImpl::didStopLoading |
    | 渲染输出 | CompositorGpuTh | SkiaOutputSurfaceImplOnGpu::SwapBuffers |
    

#### 问题定位

1.  使用ArkUI Inspector获取应用启动时隐私政策页面组件布局，可知隐私政策内容为Web页面。
    
2.  通过DevTools工具获取隐私政策页面url。
    
3.  使用DevEco Profiler Launch分析，抓取应用启动过程Trace。
    *   搜索关键字H:NWebImpl | CreateNWeb找到Web组件创建的时间点4.874s。
        
    *   搜索关键字H:NavigationControllerImpl::LoadURLWithParams | url=www.\*\*\*.com找到应用开始加载url的时间点4.900s。
        
    *   搜索关键字H:NavigationBodyLoader::StartLoadingBody | url=www.\*\*\*.com找到应用开始加载网页的时间点6.232s。
        
    *   搜索关键字H:RenderFrameImpl::didStopLoading找到网页加载完成的时间点6.380s。
        
    *   搜索关键字：网页加载完成后的第一个SkiaOutputSurfaceImplOnGpu::SwapBuffers找到开始显示网页的时间点6.409s。
        
4.  计算各阶段耗时并分析耗时过长的部分。
    *   导航流程耗时：
        
        H:NavigationControllerImpl::LoadURLWithParams到H:NavigationBodyLoader::StartLoadingBody耗时，表示通过url找到网页过程耗时较多，可通过预连接优化。
        
    *   html解析、子资源下载到页面加载完成耗时：
        
        H:NavigationBodyLoader::StartLoadingBody到H:RenderFrameImpl::didStopLoading耗时，与网页有关，可使用DevTools分析网页侧性能。可以看到性能选项中的网络部分存在一个长时间网络请求，点击请求，在下方摘要中显示内容下载耗时477ms，导致页面显示延迟。
        

#### 分析结论

1.  页面路由导航时间较长。
2.  html解析、子资源下载到页面加载完成耗时较长。

#### 修改建议

1.  针对页面路由导航耗时，可以使用预解析和预连接优化。
2.  针对html解析、子资源下载到页面完成加载耗时，可以通过预下载优化提前下载页面所需的资源。