webview和H5性能分析

webview与H5是相辅相成的，webview可以理解为我们手机上内嵌的一种浏览器，可以加载一些网页的页面，而H5可以理解成是html5，html5可以简单的理解成它是html的一种技术，webview可以加载html5
chrome浏览器自带了一种分析工具，功能类似于抓包工具，也可以很方便我们对webview和H5进行性能分析

这里的蓝线表示的是dom出现的时间点，红色线表示的是图片等资源已经加载完毕的时间点，Disable cache表示的是不加载缓存，从零载入，相当于冷启动，我们也可以看到一些详细信息

Queueing表示的是排队的过程所用的耗时
Waiting指的是等待服务器响应的耗时时间
Stalled指的是在队列中，停止请求的时间
Content Download：一些资源的下载时间
对于H5的性能分析来说，H5也有一些资源加载指标
prompt for unload：访问一个新页面时，旧页面卸载完成时间
redirect：重定向，用户注销登陆时返回主页面和跳转到其他的网站等
app cache：检查缓存，是否打开
DNS(域名系统)：DNS的查询时间，如果是长链接或者请求文件来自缓存等本地存储则返回fetchStart时间点
TCP：与服务器建立链接的时间
request：浏览器发起请求的时间
response：浏览器返回所有内容所需要的时间
processing：各种状态的时间节点
load：触发load事件执行的时间
那么我们怎么获取单个资源的性能呢，我们可以在控制台里面进行执行代码window.performance.timing，如下

可以看到刚才加载网址的时间基本都打印了出来，那如果我想要计算loadevent的所需要的时间呢，我们可以这样计算window.performance.timing.loadEventEnd-window.performance.timing.loadEventStart

紧接着问题就来了，我们怎么对它进行自动化呢，我们可以利用selenium或者appium，因为它们的底层都是可以执行js脚本代码的，我们打开pycharm`

from selenium import webdriver
class TestData:
    def test_data(self):
        driver = webdriver.Chrome()
        driver.get("https://www.mi.com/buy/detail?product_id=13368")
        print(driver.execute_script("return JSON.stringify(window.performance.timing)"))

运行之后我们发现，在控制台输入的脚本在pycharm的控制台中也打印了出来，后面我们想要计算某个事件的时间就可以通过python脚本去实现了