写点什么

干货 | H5 性能分析实战来啦~

  • 2022 年 9 月 09 日
    北京
  • 本文字数:1345 字

    阅读完需:约 4 分钟

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

复制代码


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

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

复制代码


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

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


复制代码


使用 python+selenium 进行 js 注入:

from selenium import webdriverdriver = 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}

复制代码

点击下方链接免费领取:性能测试+接口测试+自动化测试+测试开发+测试用例+简历模板+测试文档

http://qrcode.testing-studio.com/f?from=infoQ&url=https://ceshiren.com/t/topic/22265

用户头像

社区:ceshiren.com 微信:ceshiren2021 2019.10.23 加入

微信公众号:霍格沃兹测试开发 提供性能测试、自动化测试、测试开发等资料,实时更新一线互联网大厂测试岗位内推需求,共享测试行业动态及资讯,更可零距离接触众多业内大佬。

评论

发布
暂无评论
干货 | H5性能分析实战来啦~_霍格沃兹测试开发学社_InfoQ写作社区