<p class="shortdesc">WebView模块，对H5页面及H5页面下的接口性能进行监控，监控APP中H5页面加载性能，从首包时间、HTML下载用时、DOM建立用时、资源家在用时、渲染耗时等多方位分析页面加载性能。帮助运维人员掌握业务部署情况，了解承载业务的机房、云主机及CDN等第三方服务质量。</p> <section><div class="tasklabel"><h2 class="doc-tairway">操作步骤</h2></div><ol class="ol steps"><li class="li step stepexpand"> <span class="ph cmd">登录移动应用监控控制台。</span> </li><li class="li step stepexpand"> <span class="ph cmd">在左侧导航栏中，选择<span class="ph menucascade"><span class="ph uicontrol">请求性能</span><abbr> > </abbr><span class="ph uicontrol">WEBVIEW</span></span>进入页面。</span> </li><li class="li step stepexpand"> <span class="ph cmd">配置筛选条件：</span> <div class="itemgroup info"> <ul class="ul" id="webview__ul_q4x_cvv_zrb"> <li class="li"><strong class="ph b">选择APP</strong>：单击<span class="ph uicontrol">APP名称</span>，可以筛选APP。</li> <li class="li"><strong class="ph b">选择请求类型</strong>：选择<span class="ph uicontrol">自营</span>或者<span class="ph uicontrol">第三方</span>。</li> <li class="li"><strong class="ph b">APP版本筛选</strong>：选择查看APP的版本。</li> <li class="li">过滤器：</li> <li class="li"><span class="ph uicontrol">选择时间范围</span>：在页面右上角选择起止时间，可以按照时间维度查看应用数据。</li> <li class="li"><strong class="ph b">选择排序方式</strong>：选择请求/主机列表的排序方式：平均响应时间、 平均首包时间、累计响应时间、吞吐率、平均传输数据量。</li> <li class="li">选择<span class="ph uicontrol">显示请求</span>或<span class="ph uicontrol">显示主机</span>。</li> <li class="li">选择是否<span class="ph uicontrol">隐藏小于1%曝光率</span></li> </ul> </div> </li><li class="li step stepexpand"> <span class="ph cmd">根据筛选条件，查看WebView。</span> <div class="itemgroup info"><img class="image" id="webview__image_dj1_fqv_zrb" src="https://obs-cn-shanghai.fincloud.pinganyun.com/pacloud/20222306111931-14a2345c920c.png" width="800"><div class="p"></div><p class="p">可通过请求/主机两大维度，对非原生请求进行分析，定位影响慢请求耗时环节。</p><img class="image" id="webview__image_kym_qrv_zrb" src="https://obs-cn-shanghai.fincloud.pinganyun.com/pacloud/20222306111931-1a70d25b953f.png" width="800">注：WebView的HTTP请求分析与“网络请求”分析思路相同。<p class="p">采集H5页面加载时间、白屏时间，渲染时间以及各元素的url、加载时间等信息，定位App中H5页面中的慢元素，有效优化H5页面访问效率。</p><ul class="ul" id="webview__ul_qcr_vrv_zrb"> <li class="li"><strong class="ph b">一层：页面分组域名的整体性能</strong><p class="p">H5页面性能以页面的域名进行分组，按选择指标（整体性能、吞吐率）进行排序，通过排序指标展示最差域名TOP5的趋势图、吞吐率最高域名TOP5、JS错误率最高域名TOP5。</p><img class="image" id="webview__image_sv1_1sv_zrb" src="https://obs-cn-shanghai.fincloud.pinganyun.com/pacloud/20222306111931-1115b28f9fa3.png" width="800"><ul class="ul" id="webview__ul_x41_csv_zrb"> <li class="li">整体性能：页面的加载用时，即页面从开始访问到全部打开的整体耗时。计算方式：loadEventEnd – navigationStart</li> <li class="li">首包时间：从页面开始浏览到收到服务器第一包数据的时间。计算方式：responseStart-navigationStart</li> <li class="li">HTML下载用时：浏览器下载完整的HTML文档内容所需要的时间，计算方式：</li> </ul><p class="p">responseEnd-responseStart</p><ul class="ul" id="webview__ul_y41_csv_zrb"> <li class="li">DOM建立时间：浏览器建立文档对象模型（DOM）的用时，计算方式：</li> </ul><p class="p">domContentLoadedEventStart-domLoading</p><ul class="ul" id="webview__ul_z41_csv_zrb"> <li class="li">资源加载时间：从浏览器开始下资源下载到页面渲染完成的时间间隔，计算方式：</li> </ul><p class="p">loadEventEnd-domContentLoadedEventStart</p><ul class="ul" id="webview__ul_ap1_csv_zrb"> <li class="li">正确访问次数：选定时间范围内容，排除了JS错误访问的所有访问次数。<img class="image" id="webview__image_vmn_gsv_zrb" src="https://obs-cn-shanghai.fincloud.pinganyun.com/pacloud/20222306111931-1431bdfc9e5d.png" width="800"></li> <li class="li">吞吐率：平均每分钟的总访问次数。</li> <li class="li">总请求次数：该页面总的请求次数。<img class="image" id="webview__image_cgm_lsv_zrb" src="https://obs-cn-shanghai.fincloud.pinganyun.com/pacloud/20222306111931-100a0b5d9b90.png" width="800"></li> <li class="li">JS错误率：页面发生JS错误的比率，计算方式：发生JS错误的页面访问次数/该页面的总访问次数*100%。</li> <li class="li">JS错误次数：JS发生的总次数。如一次页面访问中出现过10次JS错误，则错误次数为10。</li> </ul></li> <li class="li"><strong class="ph b">二层 指定域名性能</strong><p class="p">展示：整体性能堆叠图、平均页面错误次数及平均吞吐率、JS错误率最高页面TOP5。</p><img class="image" id="webview__image_dqg_tsv_zrb" src="https://obs-cn-shanghai.fincloud.pinganyun.com/pacloud/20222306111931-1ab8e47f9a02.png" width="800"><img class="image" id="webview__image_vvx_ysv_zrb" src="https://obs-cn-shanghai.fincloud.pinganyun.com/pacloud/20222306111931-1b3dadf9968b.png" width="800"><img class="image" id="webview__image_awy_zsv_zrb" src="https://obs-cn-shanghai.fincloud.pinganyun.com/pacloud/20222306111931-1648abb099ba.png" width="800"></li> <li class="li"><strong class="ph b">三层 指定页面性能信息</strong><p class="p">单击某个域名下WebView页面，按平均加载时间排序信息，右侧展示选中域名下各WebView页面平均加载时间最差的TOP10页面趋势图。底部是所有慢加载页面列表，慢加载（加载时间>1.2s）的发生时间、页面、加载时间和白屏时间。</p><img class="image" id="webview__image_hfw_3tv_zrb" src="https://obs-cn-shanghai.fincloud.pinganyun.com/pacloud/20222306111932-1dea9b1d9f71.png" width="800"><img class="image" id="webview__image_xqv_jtv_zrb" src="https://obs-cn-shanghai.fincloud.pinganyun.com/pacloud/20222306111932-169f96cb9d61.png" width="800"><img class="image" id="webview__image_a2y_mtv_zrb" src="https://obs-cn-shanghai.fincloud.pinganyun.com/pacloud/20222306111932-10d0b26c9e36.png" width="800"></li> </ul></div> </li></ol></section>