# Web页面点击响应慢

#### 问题现象

点击应用页面按钮或其他内容，等待一段时间后界面才有变化，响应慢。

#### 背景知识

*   点击响应时延：手指点击设备屏幕，到页面发生变化的时间。常见场景如点击应用页面按钮后显示弹窗或者加载动画等。
*   DevEco Profiler：提供实时监控（Realtime Monitor）能力和全方位的设备资源监测，支持系统事件、异常报告、CPU占用、内存占用、实时帧率、GPU使用率、能耗以及网络流量消耗等多个维度的数据分析。
*   DevTools：Web前端开发调试工具，提供了电脑上调试移动设备前端页面的能力，利用DevTools工具可以分析Web组件加载页面的问题。

#### 问题定位

1.  使用DevEco Studio Profiler的ArkWeb分析模板抓取该网页加载过程的Trace。响应时延类问题需要确定响应起止点。
    
    起点是应用收到手指离开屏幕事件时，可以通过查看UserEvents泳道或者应用主线程Trace点DispatchTouchEvent xxx type=1来确定。
    
    点击响应时延的终点为应用界面开始变化的时候，由于非连续不稳定的vsync信号不一定导致界面上的渲染行为，取终点为渲染服务render\_service连续稳定渲染的第一帧vsync信号，如下图所示，可看到响应时间为875.9ms左右。
    
    查看应用主线程运行状态，应用大部分时间处于Sleeping状态，未有持续长时间Running的情况。同时在上图render\_service连续稳定渲染的第一帧vsync信号之前仅发现几帧vsync信号，UI绘制过程并没有高负载情况。
    
    查看该过程CPU上运行的进程信息，发现运行时间较长的为lication:render、NetworkService、Chrome\_IOThread，属于Web渲染、网络请求相关的线程，推测加载耗时主要在Web端。
    
2.  使用DevTools工具抓取、分析该加载过程的性能，起点为点击操作，终点为界面发生变化的第一帧，如下图中可以看到从点击到页面变化的时间间隔为813ms左右。
    
    该过程耗时可能包含以下情况：
    
    *   网络请求、网络资源下载耗时长：
        
        如上图例中，点击操作后应用首先进行安全认证的网络请求，该部分主要耗时集中在发送请求到收到响应部分（106ms）。
        
        然后应用请求loginActivity页面，下载该页面的相关资源，该部分耗时380ms左右，主要耗时为与该页面的连接（134ms）、发送请求到收到响应（96ms），以及页面资源下载（147ms）。
        
        最后应用请求loading.gif加载中图标资源并显示，该部分耗时169ms。
        
    *   JS代码运行耗时长：
        
        如下图中，网页处理点击事件时，JS代码get函数执行耗时较多（337.34ms），导致响应时间长。
        

#### 分析结论

导致Web页面点击响应慢的原因可能有：

*   网络请求、页面下载资源耗时较长。
*   JS代码运行耗时长。

#### 修改建议

*   预下载优化。
*   优化JS代码逻辑。