关键词:
H5在如今的App内占得比重越来越多:
-
白屏时间
-
首屏时间
-
加载成功率
2020年的春节活动采用手工测试,主要采用录屏分帧的手法+人工统计的方法来测试。
痛点主要有:
(1)测试步骤非常繁琐;
(2)对于白屏、首屏的结束时间点不同的测试人员会有不同判断,对测试结果造成一定的偏差;
(3)无法反映是哪个阶段耗时较长,开发同学没有办法进行针对性的优化,很难实现自动化,切配置较为繁琐,对不熟悉网络协议和抓包的同学来说使用成本较高。
经过调研,总结本方案,具有以下特点:
(1)不需要业务开发的同学配合;
(2)跨iOS、Android双端;
(3)测试结果精准;
(4)容易实现自动化和大规模批量测试。
原理
1、前端的同学应该都比较熟悉window.performance.timing这个接口,这个接口能获取到前端页面加载的各个事件的时间戳,并且市面上绝大多数浏览器内核都支持该接口协议;
2、客户端可以通过webview注入js代码;
3、客户端可以调用web中的js代码。
基于以上事实,让我们在客户端获取web性能成为可能。
实现
此处我们仅以iOS中的WKWebview为例。
1、拷贝以下内容到txt文件,然后将文件拷贝进bundle;
function timing()
let timing = window.performance.timing
var result =
// 后端响应时间
response: String(timing.responseStart - timing.requestStart),
// html页面下载时间
firstpaint: String(timing.responseEnd - timing.responseStart),
// domready
domready: String(timing.domContentLoadedEventStart - timing.responseEnd),
// 准备新页面所耗费的时间
readystart: String(timing.fetchStart - timing.navigationStart),
// 重定向期花费的时间
redirecttime: String(timing.fetchStart - timing.navigationStart),
// 应用程序缓存
appcachetime: String(timing.domainLookupStart - timing.fetchStart),
// DNS查询时间
dns: String(timing.domainLookupEnd - timing.domainLookupStart),
// TCP连接时间
tcp: String(timing.connectEnd - timing.connectStart),
// 请求期间花费的时间
requesttime:String(timing.responseEnd - timing.requestStart),
// 请求完成dom加载
initdomtreetime:String(timing.domInteractive - timing.responseEnd),
// 加载活动时间
loadeventTime: String(timing.loadEventEnd - timing.loadEventStart),
// 首屏时间(截止20201229,微视60%的web页面都能获取到这个值,有的存量页面没有,其他产品没有)
firstscreentime: window.localStorage.fmpTime,
// 白屏时间
whitescreentime: String(timing.domLoading - timing.fetchStart),
// 解析dom树耗时
analyzdomtime: String(timing.domInteractive - timing.domLoading),
// return JSON.stringify(window.performance.timing)
return result
值得注意的是:firstscreentime(首屏时间),也就是我们常说的fmp(first meaning paint),很难使用统一的算法计算fmp时间,因为我们很难规定到底什么样的元素才是页面的主要元素(图片、视频、文字)。
所以微视的解决方案是让前端的同时将fmp的时间存储到window.localStorage.fmpTime内,然后在执行timing的函数的时候,主动去取这个信息。
2、在webView的config中注入js代码;
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc]init];
config.preferences = [[WKPreferences alloc]init];
config.userContentController = [[WKUserContentController alloc]init];
NSString *jspath = [[NSBundle mainBundle]pathForResource:@"jscode.txt" ofType:**nil**];
NSString *str = [NSString stringWithContentsOfFile:jspath encoding:NSUTF8StringEncoding error:**nil**];
//注入时机是在webview加载状态WKUserScriptInjectionTimeAtDocumentStart、WKUserScriptInjectionTimeAtDocumentEnd
WKUserScript *userScript = [[WKUserScript alloc] initWithSource:str injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:**YES**];
//关键代码,把jscode.txt读取的内容字符注入到js
[config.userContentController addUserScript:userScript];
[config.userContentController addScriptMessageHandler:**self** name:@"timing"];
_wk_WebView = [[WKWebView alloc]initWithFrame:**self**.view.bounds configuration:config];
3、执行js方法
-(NSDictionary *)result
__block BOOL end = NO;
__block id result;
[self.webview evaluateJavaScript:@"timing()" completionHandler:^(id obj, NSError * _Nullable error)
result = obj;
end = YES;
];
while (!end)
[[NSRunLoop currentRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate distantFuture]];
return result;
1)WKWebview中的evaluateJavaScript方法只能在主线程中调用,且只能异步执行,上面的方法可同步返回js的返回值结果。
2)UIWebView是同步返回的。
Demo iOS:https://github.com/BBC6BAE9/NativeWebViewPerformance-iOS
Android原理是一样的,大家自行比对。
最后也给软件测试的朋友们分享一份测试资料:
以上内容,对于软件测试的朋友来说应该是最全面最完整的备战仓库了,为了更好地整理每个模块,我也参考了很多网上的优质博文和项目,力求不漏掉每一个知识点,很多朋友靠着这些内容进行复习,拿到了BATJ等大厂的offer,这个仓库也已经帮助了很多的软件测试的学习者,希望也能帮助到你。关注我公众号:程序员二黑,免费获取!
机会只垂青有准备的人,这是一个靠本事的社会。有时候,你之所以发展得不好,不是因为没有机遇,而是因为你没有准备好,导致机遇与你擦肩而过。如果你想要学习,什么时候开始都不晚,而不是瞻前顾后,你只要用尽全力,剩下的交给时间!
加油吧,测试人!路就在脚下,成功就在明天!
推荐阅读
用docker安装web前端性能测试工具yellowlabtools(代码片段)
...取得一个综合评分。并显示出在加载页面的过程中,DOM是如何相互影响。2.YellowLabTools应用方式&场景YellowLabTools的使用,可以免安装在线操作,也可以在本地环境搭建专属的服务进行测试。对于相对机密不允许过多公开的项目... 查看详情
客户端嵌套web页面如何选择(代码片段)
客户端嵌套Web页面如何选择客户端嵌套Web页面如何选择作者:驚鏵在使用客户端嵌套WEB页面有一下几种方案:WebView2[1]Electron[2]NW.js[3]sciter[4]miniblink[5]现在国内众多桌面程序都是用了以下五种,因为它跨平台更为方便&... 查看详情
markdown如何加载web字体以避免性能问题并加快页面加载速度(代码片段)
loadrunner使用记录(代码片段)
...全在浏览器里展现计时结束的这一段时间间隔响应时间=客户端响应时间+服务器端响应时间+网络响应时间(1)、客户端响应时间——构建请求和展现交易结果所耗费的时间;(2)、服务器端响应时间——完成交易请求执行的时... 查看详情
chrome性能调优技巧(代码片段)
...xff0c;不免会遇到一些页面性能瓶颈的问题。本篇介绍一下如何利用Chrome的性能面板分析网站的性能瓶颈,应该对你有所帮助。注意,为了减少一些Chrome插件对性能评估产生噪音,最好打开隐身模式访问页面进行测试。... 查看详情
web优化相关,前端性能监控工具(代码片段)
...键。每次重构对页面性能的提升,仅靠工程师开发设备的测试数据是没有说服力的,需要有大量的真实数据用于验证;资源挂了、加载出现异常,不能总靠用户投诉才后知后觉,需要主动报警。用什么监控关于前端性能指标,W3C... 查看详情
web前端性能优化——如何提高页面加载速度(代码片段)
文章目录相关思维导图等下载地址前言:在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的... 查看详情
如何测试服务器?
...次测试环境包括10台配置为PIII800/128MB内存/20G硬盘以上的客户端,它们用来模拟虚拟用户。控制台为配置是PIII850/128MB内存/40G硬盘的Acer笔记本电脑。交换机为带有两个千兆GBIC接口、24个10/100M自适应端口的Cisco2950,客户端与控制台... 查看详情
基于selenium和chromedriver的自动化页面性能测试(代码片段)
...#xff0c;拖了很久才在五一假期将Selenium实现自动化页面性能测试的代码实现部分补上,希望今后自己能更勤勉,多一些知识产出。SeleniumWebDriver(以下简称SW)提供了一套用于Web应用程序的自动化测试工具。SW按其应... 查看详情
web网站性能测试分析及调优实例(代码片段)
...此,把整个经历过程给大家分享一下,包括了主要包括了如何使用性能测试的压测工具,压测前的性能问题评估,以及压测执行后的性能问题分析、瓶颈定位。&em 查看详情
web性能压力测试工具之webbench详解(代码片段)
webbench的标准测试可以向我们展示服务器的两项内容:每秒钟响应请求数和每秒钟传输数据量。webbench不但能具有便准静态页面的测试能力,还能对动态页面(ASP,PHP,JAVA,CGI)进行测试的能力。他支持对含有SSL的安全网站例如电子... 查看详情
esrally如何进行简单的自定义性能测试?(代码片段)
...sk都指定了一个operation,除此之外还可以设定clients(并发客户端数)、warmup-iterations(预热的循环次数)、iterations(operation执行的循环次数)等。指定特定的schedule可以使用命令行参数--include-tasks和exclude-taskschallenges:通过组合sche... 查看详情
web静态页面和动态页面的区别(代码片段)
...实验测试一、静态web页面:1、在静态Web程序中,客户端使用Web浏览器(IE、FireFox等)经过网络(Network)连接到服务器上,使用HTTP协议 查看详情
搞懂这自动化web性优化测试,年薪20w不用愁(代码片段)
在构建Web站点的过程中,任何一个细节都有可能影响网站的访问速度。如果开发人员不了解前端性能相关知识,很多不利网站访问速度的因素会在线上形成累加,从而严重影响网站的性能,导致网站访问速度变慢... 查看详情
高性能网站建设-4压缩组件(代码片段)
...最为简单的技术,但影响是最大的。1.1从HTTP1.1开始,Web客户端可以通过HTTP请求中的Accept-Encoding头来表示对压缩的支持。Accept-Encoding:gzip,deflate1.2Web服务器通过响应中的Content-Encoding头来通知web客户端。Content-Encoding:gzip1.3gzi 查看详情
除了rps和错误率,性能测试还需要关注这些指标(代码片段)
背景最近发现交给外包做的性能测试,外包人员除了看RPS、错误率,其他指标完全不看。我陷入了思考,现在很多公司为了降低性能测试的门槛,内部会针对一些开源框架进行二次开发,以用户非常友好的WEB页面呈现出来。因此... 查看详情
javagtac2013的演示代码由michaelklepikov讲述“使用webdriver进行web性能测试”(代码片段)
web性能压力测试工具——siege(代码片段)
...找了个自动点的工具——Siege Siege是一款开源的压力测试工具,设计用于评估WEB应用在压力下的承受能力。可以根据配置对一个WEB站点进行多用户的并发访问,记录每个用户所有请求过程的相应时间,并在一定数量的并发访... 查看详情