web和webview的性能分析
一些解释：
1.webview是手机的浏览器，不是H5
2.android4.4就默认用chrome作为webview的浏览器了
chrome分析工具介绍
步骤：
1.打开chrome
2.打开F12
3.再发送http请求
4.在network中找数据分析
chrome中network的大体介绍（如下图）
[
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不好找啊，速度慢
每个请求的详细信息（见下图）
[
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阶段过长，往往是丢包所致，这也意味着网络或服务端有问题。
参考资料：
<header style="align-items: center; display: flex; margin-bottom: 1em;">cnblogs.com 3</header>
[图片上传失败...(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这个开关
5.准备好翻墙的环境
6.在chrome的url中输入：chrome://inspect/#devices
7.连接设备，并访问webview的网站，比如打开百度
8.当输完百度后，就可以点击inspect去观察了
9.但因为我的chrome不是62的，所以分析不出来了，看下图，什么都没有
[
clipboard1400×438 66.5 KB](https://ceshiren.com/uploads/default/original/2X/4/473e806d2d989251b88357de0d58eea78b549671.png)
如何测试H5的性能
含义：其实就是webview的性能了，只不过可以用代码的方式，就不用chrome了，可以实现自动化什么的。本质是通过w3c的标准，通过特定的api，运用埋点等技术，分析H5的性能
w3c的图解
[
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
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
