【专项测试】webview性能分析的笔记

web和webview的性能分析

一些解释:

1.webview是手机的浏览器,不是H5

2.android4.4就默认用chrome作为webview的浏览器了

chrome分析工具介绍

步骤:

1.打开chrome

2.打开F12

3.再发送http请求

4.在network中找数据分析

chrome中network的大体介绍(如下图)

1.disable cache表示是否关闭缓存,关闭等于冷启动

2.all、XHR(AJAX)、JS、CS表示不同的请求类型,

3.name中的请求是按照先后顺序来展示的,第一个请求肯定是www.baidu,com

4.蓝线表示dom构建成功的时间点

5.红线表示全部资源都加载完成的时间点

6.底部显示有多少个请求,资源有多大,完成全部请求需要多长时间,还有dom和资源加载的时间点

红线和蓝线额外知识点:

1.xpath是从dom里面找的

2.css是从红色线图片加载完再去找,更稳定一些,找的速度也快一些,dom不好找啊,速度慢

每个请求的详细信息(见下图)

1.queued at 878.59ms

一个www.baidu.com的请求,轮到获取这个资源在前面排队的时间

2.queued at 878.59ms

排队的请求+Queueing的时间,878.59ms+1.25ms=879.85ms

3.Queueing

请求文件顺序的的排序 ,浏览器有线程限制的,发请求也不能所有的请求同时发送,因此是从添加到待处理队列到实际开始处理的时间间隔,通常chrome的线程支持6个

4.Stalled

  • 普通解释:是浏览器得到要发出这个请求的指令到请求可以发出的等待时间,一般是代理协商、以及等待可复用的TCP连接释放的时间,不包括DNS查询、建立TCP连接等时间等
  • 详细解释:当http真正发送请求时,比如请求一个gif资源,服务端接受到这个请求后,需要返回一个tcp响应,这个tcp响应是ack的响应,客户端收到后,就知道不用重复发送这个请求了,如果客户端在一定时间内收不到这个请求,就会重新发送这个请求,windows好像听大神说会发5次,如果5次,服务端都没有发送tcp响应,那么tcp会断开,重新发起tcp的三次握手,所以出现stalled阶段过长,往往是丢包所致,这也意味着网络或服务端有问题。

参考资料:

https://blog.csdn.net/sinat_21455985/article/details/53508115

5.DNS Lookup:

时间执行DNS查找。每个新域pagerequires DNS查找一个完整的往返。 DNS查询的时间,当本地DNS缓存没有的时候,这个时间可能是有一段长度的,但是比如你一旦在host中设置了DNS,或者第二次访问,由于浏览器的DNS缓存还在,这个时间就为0了。

6.Inital connection:

建立TCP连接的时间,就相当于客户端从发请求开始到TCP握手结束这一段,包括DNS查询+Proxy时间+TCP握手时间。

7.request sent:

请求第一个字节发出前到最后一个字节发出后的时间,也就是上传时间

8.Waiting(TTFB):

请求发出后,到收到响应的第一个字节所花费的时间(Time To First Byte),发送请求完毕到接收请求开始的时间;这个时间段就代表服务器处理和返回数据网络延时时间了。服务器优化的目的就是要让这个时间段尽可能短。

9.Content Download :

收到响应的第一个字节,到接受完最后一个字节的时间,就是下载时间

如何监测手机端的webview的性能

使用chrome remote inspect工具

步骤:

1.准备chrome的62版本,其他版本显示不出network等bug

2.android版本为6.0才行,mumu默认是6,而且还在开发者模式中帮你打开了webview的开关

3.如果不是android6.0的版本,你的手机需要root,才可以在开发者选项打开webview开关

4.或者在app中打开webview这个开关
clipboard

5.准备好翻墙的环境

6.在chrome的url中输入:chrome://inspect/#devices
clipboard

7.连接设备,并访问webview的网站,比如打开百度
clipboard

8.当输完百度后,就可以点击inspect去观察了
clipboard

9.但因为我的chrome不是62的,所以分析不出来了,看下图,什么都没有

如何测试H5的性能

含义:其实就是webview的性能了,只不过可以用代码的方式,就不用chrome了,可以实现自动化什么的。本质是通过w3c的标准,通过特定的api,运用埋点等技术,分析H5的性能

w3c的图解

● prompt for unload:访问一个新页面时,旧页面卸载完成的时间
● redirect:重定向,用户住校登录时返回页面和跳转到其他的网站等
● app cache:检查缓存是否打开
● DNS:DNS查询的时间
● TCP:TCP连接
● request:浏览器发起请求
● response:服务器返回响应给客户端
● processing:各种状态的时间点
● load:出发load事件执行的时间

埋点的功能
1.可以实现在不同用户的网络环境、硬件中,考察出真实服务器请求的速度,因为我可以分离出tcp、dns、request、processing等客户端的处理,只看服务端的处理
2.可以观察我当前网络和硬件下,客户端会因为什么导致网络卡顿延迟,比如是不是DNS出问题了,还是重定向等不合理导致的

参考api:https://www.w3.org/TR/navigation-timing/

chrome用console代码的步骤:
1.进入F12,然后发起请求
2.进入到console界面,先clear()屏幕
3.输入window.performance.timing

用pycharm获取性能的代码:


from selenium import webdriver

driver=webdriver.Chrome()

driver.get("https://www.baidu.com")

print(driver.execute_script("return JSON.stringify(window.performance.timing)"))

结果如下:和chrome的一毛一样

{“connectStart”:1588594545718,“navigationStart”:1588594545712,“loadEventEnd”:1588594549759,“domLoading”:1588594546591,“secureConnectionStart”:1588594545734,“fetchStart”:1588594545713,“domContentLoadedEventStart”:1588594548960,“responseStart”:1588594546581,“responseEnd”:1588594546590,“domInteractive”:1588594548960,“domainLookupEnd”:1588594545718,“redirectStart”:0,“requestStart”:1588594546501,“unloadEventEnd”:0,“unloadEventStart”:0,“domComplete”:1588594549754,“domainLookupStart”:1588594545715,“loadEventStart”:1588594549754,“domContentLoadedEventEnd”:1588594548973,“redirectEnd”:0,“connectEnd”:1588594546500}

关闭