实战演示 H5 性能分析

简介: 使用chrome浏览器对webview进行手工查看,伴随着业务增多,数量加大,手工操作的速度会无法跟上业务增长,此时需要自动化方法测试webview性能。当页面加载时,会渲染一系列内容,渲染过程可分为多个阶段,比如下图:![](https://ceshiren.com/uploads/default/original/3X/d/7/d7eab38d60e4430a01c658f6605

使用chrome浏览器对webview进行手工查看,伴随着业务增多,数量加大,手工操作的速度会无法跟上业务增长,此时需要自动化方法测试webview性能。

当页面加载时,会渲染一系列内容,渲染过程可分为多个阶段,比如下图:

• Prompt for unload 访问一个新页面时,旧页面卸载完成的时间
• redirect 重定向,用户注销登陆时返回主页面和跳转到其它的网站等
• App cache 检查缓存,是否打开
• DNS 表示 DNS 查询的时间,如果是长连接或者请求文件来自缓存等本地存储则返回fetchStart时间点
• TCP 与服务器建立链接的时间
• Requests 客户端发起请求的时间
• Response 拿到服务器第一个响应字节到最后一个响应字节的时间
• Processing 各种状态的时间点,例如加载状态等等
• onLoad 触发load事件执行的时间

在chrome浏览器中,执行js代码可获取各个阶段的内容:

window.performance.timing

上面的时间只是一个时间点,如果想获取各阶段的具体时间,就需要对两个时间点进行相减运算,比如计算domContent加载事件时间:

window.performance.timing.\
domContentLoadedEventEnd -\
window.performance.timing.\
domContentLoadedEventStart


appium/selenium可以执行js,借用appium/selenium工具可实现自动化获取能指标,调用appium/selenium的ExecuteScriptapi,可向页面注入下面代码:

//显示所有阶段的时间点
return
JSON.stringify(window.performance.timing)
//显示指定资源的时间,比如img
return
JSON.stringify(window.performance.\
getEntriesByName (document.querySelector("img").src)[0],null,2)

H5性能测试需要配合自动化测试工具使用,比如selenium或者appium,通过js代码注入实现自动化调用api。

使用 python + selenium 进行js注入:

from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://home.testing-studio.com/")
print(driver.execute_script(    
      "return JSON.stringify(window.performance.timing)"))

执行后会返回一个json数据,包含了简介中的各个性能指标,可对性能指标做二次处理或可视化展示:

{"navigationStart":1585043212714,
"unloadEventStart":0,"unloadEventEnd":0,
"redirectStart":0,
"redirectEnd":0,
"fetchStart":1585043212717,
"domainLookupStart":1585043212747,
"domainLookupEnd":1585043212747,
"connectStart":1585043212747,
"connectEnd":1585043212835,
"secureConnectionStart":1585043212787,
"requestStart":1585043212836,
"responseStart":1585043212918,
"responseEnd":1585043212921,
"domLoading":1585043212929,
"domInteractive":1585043214972,
"domContentLoadedEventStart":1585043214972,
"domContentLoadedEventEnd":1585043214972,
"domComplete":1585043215976,
"loadEventStart":1585043215976,
"loadEventEnd":1585043215976}

原文链接

相关文章
|
7月前
|
数据可视化 Go 数据库
性能分析神器:pprof命令详解与实战
性能分析神器:pprof命令详解与实战
855 0
性能分析神器:pprof命令详解与实战
|
2月前
|
SQL 监控 关系型数据库
SQL语句性能分析:实战技巧与详细方法
在数据库管理中,分析SQL语句的性能是优化数据库查询、提升系统响应速度的重要步骤
|
7月前
|
监控 数据可视化 数据挖掘
Golang性能分析神器:pprof与火焰图实战揭秘
在软件开发的世界里,性能分析如同一把锋利的剑,它能帮助开发者洞悉程序的运行状态,发现并解决那些隐藏在代码深处的性能瓶颈。而在Go语言的生态系统中,pprof无疑是这把剑中的佼佼者。本文将带你深入了解pprof的使用方法,并通过火焰图这一直观的工具,让你对性能分析有一个全新的认识。
|
缓存 负载均衡 算法
精华推荐 | 深入浅出学习透析Nginx服务器的基本原理和配置指南「Keepalive性能分析实战篇」
精华推荐 | 深入浅出学习透析Nginx服务器的基本原理和配置指南「Keepalive性能分析实战篇」
249 0
精华推荐 | 深入浅出学习透析Nginx服务器的基本原理和配置指南「Keepalive性能分析实战篇」
|
Web App开发 移动开发 缓存
|
Web App开发 移动开发 缓存
实战演示 H5 性能分析
实战演示 H5 性能分析
|
29天前
|
缓存 监控 Linux
Linux性能分析利器:全面掌握perf工具
【10月更文挑战第18天】 在Linux系统中,性能分析是确保软件运行效率的关键步骤。`perf`工具,作为Linux内核自带的性能分析工具,为开发者提供了强大的性能监控和分析能力。本文将全面介绍`perf`工具的使用,帮助你成为性能优化的高手。
93 1
|
29天前
|
缓存 监控 Linux
掌握Linux性能分析:深入探索perf工具
【10月更文挑战第26天】
30 1
|
2月前
|
Web App开发 监控 JavaScript
一些常用的 Vue 性能分析工具
【10月更文挑战第2天】
96 1
|
3月前
|
SQL 缓存 关系型数据库
MySQL高级篇——性能分析工具
MySQL的慢查询日志,用来记录在MySQL中响应时间超过阀值的语句,具体指运行时间超过long-query_time值的SQL,则会被记录到慢查询日志中。long_query_time的默认值为 10,意思是运行10秒以上(不含10秒)的语句,认为是超出了我们的最大忍耐时间值。它的主要作用是,帮助我们发现那些执行时间特别长的 SOL 查询,并且有针对性地进行优化,从而提高系统的整体效率。当我们的数据库服务器发生阻塞、运行变慢的时候,检查一下慢查询日志,找到那些慢查询,对解决问题很有帮助。
MySQL高级篇——性能分析工具