您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > H5

实战演示 H5 性能分析

时间:2022-06-06 15:30:44  来源:  作者:CeshirenTester

W3C标准是浏览器标准,一般浏览器都支持W3C标准,它规定使用者可以通过api查询性能信息,可借用W3C协议完成自动化H5性能测试。
W3C官网:
https://www.w3.org/TR/navigation-timing/

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

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

实战演示 H5 性能分析

 

• Prompt for unload 访问一个新页面时,旧页面卸载完成的时间

• redirect 重定向,用户注销登陆时返回主页面和跳转到其它的网站

App cache 检查缓存,是否打开

DNS 表示 DNS 查询的时间,如果是长连接或者请求文件来自缓存等本地存储则返回fetchStart时间点

• TCP 与服务器建立链接的时间

• Requests 客户端发起请求的时间

• Response 拿到服务器第一个响应字节到最后一个响应字节的时间

• Processing 各种状态的时间点,例如加载状态等等

• onLoad 触发load事件执行的时间

实战演示 H5 性能分析

 


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

window.performance.timing
实战演示 H5 性能分析

 

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

window.performance.timing.
domContentLoadedEventEnd -
window.performance.timing.
domContentLoadedEventStart
实战演示 H5 性能分析

 

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 性能分析

 


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

使用 Python/ target=_blank class=infotextkey>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,


Tags: H5   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
实战演示 H5 性能分析
W3C标准是浏览器标准,一般浏览器都支持W3C标准,它规定使用者可以通过api查询性能信息,可借用W3C协议完成自动化H5性能测试。 W3C官网: https://www.w3.org/TR/navigation-timing...【详细内容】
2022-06-06  Search: H5  点击:(330)  评论:(0)  加入收藏
吃透移动端 H5 响应式布局 |深入原理到目前最佳实践方案
前言最近写了第三个移动端 H5 的项目,准备记录下自己在 H5 项目中的一些实践探索。移动端 H5 与 PC 端开发最大的区别之一,大概就是响应式布局问题。那么下面我们就来聊聊移...【详细内容】
2020-03-16  Search: H5  点击:(420)  评论:(0)  加入收藏
如何部署 H5 游戏到云服务器?
在自学游戏开发的路上,最有成就感的时刻就是将自己的小游戏做出来分享给朋友试玩,原生的游戏开可以打包分享,小游戏上线流程又长,那 H5 小游戏该怎么分享呢?本文就带大家通过 ngi...【详细内容】
2019-09-20  Search: H5  点击:(835)  评论:(0)  加入收藏
打造丝般顺滑的 H5 翻页库
随着近几年移动营销页的火爆,催生了一个中国式的名词「H5」。而 H5 最常见的形态就是类似幻灯片翻页效果。...【详细内容】
2019-09-04  Search: H5  点击:(797)  评论:(0)  加入收藏
▌简易百科推荐
京东快递H5项目接入vite实战
本文介绍了如何在开发阶段将vite应用于vue 2.x 工程,从而提高研发的开发体验与效率。主要涉及如何兼容process变量,如何处理 node-sass 与 dart-sass冲突,以及路径别名的兼容处...【详细内容】
2023-03-17  东东程序猿  今日头条  Tags:H5   点击:(234)  评论:(0)  加入收藏
什么是HTML5?HTML5的含义、元素和好处
译者 | 李睿审校 | 孙淑娟HTML5是超文本标记语言(HTML)的第五版,网络浏览器使用它来可视化代码。它在网站功能、网页内容开发等方面有一些改进。 ​HTML的发展 ​在万维网的...【详细内容】
2023-03-16  李睿  51CTO  Tags:HTML5   点击:(263)  评论:(0)  加入收藏
H5直播技术起航
作者:京东科技 吴磊音视频基本概念视频格式就是通常所说的.mp4,.flv,.ogv,.webm等。简单来说,它其实就是一个盒子,用来将实际的视频流以一定的顺序放入,确保播放的有序和完整性...【详细内容】
2023-01-10  京东云开发者  今日头条  Tags:H5   点击:(245)  评论:(0)  加入收藏
Canvas从入门到实战
1、什么是Canvas?HTML5 提供Canvas API,其本质上是一个DOM元素,可以看成是浏览器提供一块画布供我们在上面渲染2D或者3D图形。由于3D绘制上下文(webgl)目前在很多浏览器上兼...【详细内容】
2022-12-24  闪念基因  今日头条  Tags:Canvas   点击:(227)  评论:(0)  加入收藏
网站程序开发使用的html5你了解吗
首先可以肯定,html5(简称h5)将在很多年内成为互联网的主流。那到底什么是h5呢?想了解h5,先要了解它的前身html和被它终结的flash:2000年左右的前端静态网页格式是html的,仅支持ie,n...【详细内容】
2022-09-26  易企优     Tags:html5   点击:(502)  评论:(0)  加入收藏
使用 JavaScript 和 HTML5 Canvas 绘制图表
你将要创造什么在本教程中,我将向您展示如何使用 JavaScript 和画布以饼图和圆环图的形式显示数字信息。什么是饼图?图表是一种统计工具,用于以图形方式表示数值数据。饼图将...【详细内容】
2022-08-31  兴趣编程网  今日头条  Tags:   点击:(510)  评论:(0)  加入收藏
一看就能学会的H5视频推流方案
环境部署1、 配置、安装 Nginx;# ./configure --sbin-path=/usr/local/nginx/nginx --conf-path=/usr/local/nginx/nginx.pid --with-http_ssl_module --with-pcre=/usr/loca...【详细内容】
2022-08-27  音视频开发老舅    Tags:H5   点击:(623)  评论:(0)  加入收藏
H5实时解码音频并播放
音视频的格式是一个有歧义的说法。我们熟知的诸如Flv、Mp4、Mov啥的都是包装格式,可以理解为一种容器,就像一个盒子。里面放到是经过编码的音视频数据,而这些音视频数据都有自...【详细内容】
2022-08-17  音视频开发老舅    Tags:音频   点击:(687)  评论:(0)  加入收藏
实战演示 H5 性能分析
W3C标准是浏览器标准,一般浏览器都支持W3C标准,它规定使用者可以通过api查询性能信息,可借用W3C协议完成自动化H5性能测试。 W3C官网: https://www.w3.org/TR/navigation-timing...【详细内容】
2022-06-06  CeshirenTester    Tags: H5   点击:(330)  评论:(0)  加入收藏
HTML5新特性
①语义化标签,可以让页面有更加完善的结构,让页面的元素有含义,同时利于被搜索引擎解析,有利于SEO,主要标签包括下面的标签:html5新的常用标签②增强型表单可以通过input的type属...【详细内容】
2022-05-07  Celinf    Tags:HTML5   点击:(417)  评论:(0)  加入收藏
站内最新
站内热门
站内头条