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

web和webview的性能分析

一些解释：

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

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

chrome分析工具介绍

步骤：

1.打开chrome

2.打开F12

3.再发送http请求

4.在network中找数据分析

chrome中network的大体介绍（如下图）

[

clipboard

clipboard924×632 67.2 KB](https://ceshiren.com/uploads/default/original/2X/7/732d8f3f6c2b88e6f77b2a852f369bffbf8e1e93.png)

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不好找啊，速度慢

每个请求的详细信息（见下图）

[

clipboard

clipboard807×412 8.17 KB](https://ceshiren.com/uploads/default/original/2X/2/2bf93c5115811ab3f9154db85545dc7e7f904ea3.png)

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阶段过长，往往是丢包所致，这也意味着网络或服务端有问题。

参考资料：

cnblogs.com 3

[图片上传失败...(image-a08f7b-1609142005878)]

chrome的timeline中stalled问题解析 - 星朝 - 博客园 3

在公司国做一个运营活动，上线后PM总是抱怨访问速度过慢，影响运营效果。然而从前端的角度来说我已经做了如下优化： css、js合并压缩、图片压缩、雪碧图、静态资源全部上CDN。但是依然很慢，实在s是困惑

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

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的，所以分析不出来了，看下图，什么都没有

[

clipboard

clipboard1400×438 66.5 KB](https://ceshiren.com/uploads/default/original/2X/4/473e806d2d989251b88357de0d58eea78b549671.png)

如何测试H5的性能

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

w3c的图解

[

clipboard

clipboard1115×660 246 KB](https://ceshiren.com/uploads/default/original/2X/c/c7b95de7760578dc733c4f9d5211d62cb99e02fd.png)

● 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/ 1

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

[

clipboard

clipboard891×374 12.2 KB](https://ceshiren.com/uploads/default/original/2X/f/fafa6cd9e507737794e8a8fef5e0702a8289b680.png)

用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}

（文章来源于霍格沃兹测试学院）

更多技术文章可点击http://qrcode.testing-studio.com/f?from=jianshu&url=https://ceshiren.com/t/topic/3822