实战演示 H5 性能分析

H5性能分析自动化测试实战

最新推荐文章于 2024-06-25 13:05:10 发布

原创

最新推荐文章于 2024-06-25 13:05:10 发布 · 982 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#压力测试

本文介绍了如何使用Chrome浏览器和自动化工具如Appium、Selenium进行H5性能测试。通过解析页面加载的不同阶段，如DNS查询、TCP连接、响应时间等，利用JavaScript获取性能指标，并通过自动化工具执行JS代码来收集数据，实现性能测试的自动化。同时，文章提到了Python结合Selenium进行JS注入的例子，以及如何对获取的数据进行进一步处理和可视化。

使用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

最低0.47元/天解锁文章