| H5性能分析实战来啦~_测试app里h5的页面性能

浏览器访问：https://hub.docker.com/_/nginx 查看Nginx镜像详细信息。

H5性能该如何测试呢？很多人不知道该如何下手。其实可以借用W3C协议完成自动化H5性能测试。

因为W3C标准是浏览器标准，一般浏览器都支持W3C标准，它规定使用者可以通过api查询性能信息。W3C官网：https://www.w3.org/TR/navigation-timing/

更多关于专项测试的文章，可以点击公众号关注哦~

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

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

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

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

window.performance.timing

1
2

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

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

1
2
3
4
5

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)


1
2
3
4
5
6
7
8
9
10

使用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)"))
1
2
3
4
5

执行后会返回一个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}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

内容全面升级，5 个月 20+ 项目实战强化训练，资深测试架构师、开源项目作者亲授 BAT 大厂前沿最佳实践，带你一站式掌握测试开发必备核心技能（对标阿里P6+，年薪50W+）！直推 BAT 名企测试经理，普遍涨薪 50%+！

⬇️ 点击“阅读原文”，提升测试核心竞争力！
原文链接

获取更多相关资料，请添加微信 ceshiren6
获取更多技术文章分享
下载镜像，默认会下载lastest最新版本的软件，可以指定软件的版本。例如：nginx:1.17.9。

docker pull nginx

1
2

docker pull nginx:1.17.9

1
2

运行 Nginx 容器命令为：

docker run -d --name nginx -p 8088:80 nginx:1.17.9

1
2

• run：启动一个容器
• • -d：后台守护进行方式运行
• • –name：指定容器的名字
• • -p：映射容器的端口到宿主机，前面宿主机端口，后面容器端口。
• • nginx:1.17.9：容器镜像名称和版本信息
    

如果出现“Welcome to nginx！”就表示Nginx服务已经正常启动啦！

当我们可以访问 Nginx 服务的时候，会发现访问的页面是 Nginx 默认的欢迎页面，我们要怎么样才能访问自定义的页面呢？我们可以用挂载目录的方式让Nginx服务展示我们想要的页面。

1. 在当前位置新建一个 html 目录，里面放一个新建的 html 文件，名字为 index.html，内容如下。

3. Hogwarts

 Nginx 
 容器
1
2
3

docker run -d --name nginx1 -p 8089:80
-v ${PWD}/html:/usr/share/nginx/html
nginx:1.17.9

- -p 8089:80映射容器的80端口到宿主机8089端口。
- - -v ${PWD}/html:/usr/share/nginx/html：-v参数代表挂载一个目录到容器内，前面的目录${PWD}/html代表宿主机的目录，后面的目录/usr/share/nginx/html代表容器内的目录。它们中间用分号隔开。其中${PWD}是一个系统变量，代表当前所在的目录。然后我们在访问宿主机的IP和端口查看一下状态。
- ![](https://img-blog.csdnimg.cn/img_convert/25c3496e6f54df12cc5d93ab7035e916.png)
当出现“Hogwarts”时，就代表运行正常，我们就可以把新建的 html 文档都放到 html 目录里面。然后去访问啦！

明天的文章将会告诉大家如何用 Docker搭建测试用例平台 Testlink。Testlink 是基于 WEB 的测试用例管理系统哦。敬请期待。




### 点个在看你最好看
⬇️ 点击“阅读原文”，提升测试核心竞争力！
[原文链接](https://mp.weixin.qq.com/s?__biz=MzU3NDM4ODEzMg==&mid=2247494485&idx=1&sn=e777571cb47fcab44b7316d36d8d7716&chksm=fd31899eca4600887a43a612d896b8c6d1a80a90d2d63072eda5ee0be936ac4f46f71b2f2359#rd) 

获取更多相关资料，请添加微信 ceshiren6
[获取更多技术文章分享](https://qrcode.ceba.ceshiren.com/link?name=article&project_id=qrcode&from=csdn2&timestamp=1650855595)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19