前端测试 我们不造轮子,只做轮子的搬运工——Web 性能自动化初探

hello · November 15, 2018 · Last by 迷茫测试 replied at September 19, 2019 · 2214 hits

前言

社区里关于前端测试贴子好像相对来说少一些,百度下来也是那几篇帖子来回抄。最近两天稍微闲一点了,刚好看到社区里两篇前端相关帖子,很受启发,于是手痒,打算学习一下。

相关姿势

百度到的姿势,大都是基于 Navigation Timing API来玩。

  • 传教士:打开Chrome控制台,在命令行中输入performance

优点:人人都会玩都能玩。缺点:手动挡,不方便自动化集成。

谷歌允许第三方基于chrome的web应用程序基于上述协议进行调试,收集、分析多种语言调用封装

优点:解放双手,再也不需要,左手右手一个慢动作了,畅快,舒服~。缺点:你得会上述封装其中一种语言,不会的话,还是玩手动挡吧

姿势说明

  • navigationStart:
    在同一个浏览器上下文中,当网页load/unload动作被触发时,也可能是提示关闭当前文档时(即回车键在url地址栏中按下,页面被再次刷新,submit按钮被点击)。如果无前一个网页 unload,那么navigationStart的值就是fetchStart。

  • redirectStart:
    页面重定向时的开始时间(如果存在重定向),无页面重定向时值是0。

  • unloadEventStart:
    前一个网页(与当前页面同域)unload 的开始的时间戳,如果无前一个网页 unload 或者前一个网页与当前页面不同域,则值为 0

  • unloadEventEnd:
    和 unloadEventStart 相对应,返回前一个网页 unload 事件回调函数执行完毕的时间戳,如果无前一个网页 unload 或者前一个网页与当前页面不同域,则值为 0

  • redirectEnd:
    如果存在重定向的话,redirectEnd表示最后一次重定向后服务器端response的数据被接收完毕的时间。无重定向的话值为0。

  • fetchStart:
    在fetchStart和domainLookupStart之间,浏览器会检查当前文档的缓存,浏览器发起任何请求之前的时间值。

  • domainLookupStart:
    浏览器开始检查当前域名的DNS之前的那一时刻。如果因为任何原因没有去检查DNS(即浏览器使用了缓存,持久连接,或者本地资源),那么它的值等同于fetchStart。

  • domainLookupEnd:
    指浏览器完成DNS检查时的时间。如果DNS没有被检查,那么它的值等同于fetchStart。

  • connectStart:
    当浏览器开始于服务器连接时的时间。如果资源取自缓存(或者服务器由于其他任何原因没有建立连接,例如持久连接),那么它的值等同于domainLookupEnd。

  • connectEnd:
    当浏览器端完成与服务器端建立连接的时刻。如果没有建立连接它的值等同于domainLookupEnd。

  • secureConnectionStart:
    如果页面使用HTTPS,它的值是安全连接握手之前的时刻。如果该属性不可用,则返回undefined。如果该属性可用,但没有使用HTTPS,则返回0。

  • responseStart:
    指客户端收到从服务器端(或缓存、本地资源)响应回的第一个字节的数据的时刻。

  • responseEnd:
    指客户端收到从服务器端(或缓存、本地资源)响应回的最后一个字节的数据的时刻。

  • domLoading:
    指开始解析渲染 DOM 树的时间,document对象创建完成,Document.readyState 变为 loading,并将抛出 readystatechange 相关事件的时刻。

  • domInteractive:
    指完成解析 DOM 树的时间,包括在“传统模式”下被阻塞的通过script标签加载的内容(除了使用defer或者async属性异步加载的情况),Document.readyState 变为 interactive,并将抛出 readystatechange 相关事件,这时候并没有开始加载网页内的资源。

  • domContentLoadedEventStart:
    当DOMContentLoaded事件触发之前,DOM 解析完成后,网页内资源加载开始的时间,浏览器完成所有script(包括设置了defer属性但未设置async属性的script)的下载和解析之后的时刻。

  • domContentLoadedEventEnd:
    当DOMContentLoaded事件完成之后的时刻,DOM 解析完成后,网页内资源加载完成的时间,它也是javascript类库中DOMready事件触发的时刻。

  • domComplete:
    DOM 树解析完成,且资源也准备就绪的时间,如果已经没有任何延迟加载的事件(所有图片的加载)阻止load事件发生,那么该时刻将会将document.readyState属性设置为"complete",并将抛出 readystatechange 相关事件,此时刻就是domComplete。

  • loadEventStart:
    load 事件发送给文档,也即 load 回调函数开始执行的时间,该属性返回的是load事件刚刚发生的时刻,如果load事件还没有发生,则返回0。

  • loadEventEnd:
    load 事件的回调函数执行完毕的时间,该属性返回load事件完成之后的时刻。如果load事件未发生,则返回0。

网页性能常见指标

  • 白屏时间(domLoading - navigationStart)
    等待页面开始展示的时间

  • 首屏时间(首屏内容渲染结束时间点 - navigationStart)
    用户能够看到区域内所有元素加载完的时间,这个首屏渲染结束时间点取得有点蛋疼,还没方案

  • 可交互时间(domInteractive - navigationStart)
    完成Dom解析,可以绑定用户事件响应用户操作的时间

  • 页面加载完成的时间( loadEventEnd - navigationStart)
    反映用户等待页面可用的时间

  • DOM 解析时间(domComplete - responseEnd)
    值太大时,请检查一下是否你的 DOM 树嵌套是不是太多了太复杂,是否可以精简优化

  • 重定向的时间(redirectEnd - redirectStart)
    尽量不使用重定向

  • DNS解析时间(domainLookupEnd - domainLookupStart)
    是否需要进行DNS 预加载,是否可以尽量减少不同的域名

  • 首一个字节时间(responseStart - navigationStart)
    反映用户拿到资源占用的时间,是否需要增加加异地机房了么,是否需要进行加CDN ,是否需要加带宽等

  • 内容加载完成的时间(responseEnd - requestStart)
    页面返回的内容是否进行压缩优化(页面内容 gzip 压缩,css/js 等压缩)

  • onload 执行时间(loadEventEnd - loadEventStart)
    画面onload 回调函数是否执行了过多耗时操作,是否需要考虑延迟加载、按需加载等策略

  • DNS 缓存时间(domainLookupStart - fetchStart)
    是否需要进行DNS缓存

  • 卸载页面的时间(unloadEventEnd - unloadEventStart)
    前一个网页卸载开始到完成的时间

  • TCP/IP建连时间(connectEnd - connectStart)
    HTTP(TCP) 开始到完成建立连接的时间

搬运的轮子

  • 后台 springboot、springdata jpa、shiro,cdp4j
  • 前端 freemarker、bootstrap,echarts...

轮子的组装

  • 输入URL,点击测评
  • 后台调用cdp4j收集ChromeDevTools返回结果显示

存在问题

  • 首屏时间的取得还没头绪
  • 业界各个指标参考值,不知道多少
  • 打算做UI自动化时采集还没接入
  • 监控和报告模块还没想好设计
  • 和那些收费的平台差距功能巨大
  • 前端性能资料少,BAT的思想思路不知道也模仿不来

后记

国外的newrelic,appdynamics,国内也有很多专测前端性能测试的公司如:X云,XX魔方,X视宝,ONEXXX,可惜都是收费的。阿里,腾讯,美团等等都有自己的前端性能测试平台,可惜只能在PPT中仰视,实现技术鲜有分享,是那种我们永远模仿不来的高大上,只能仰视膜拜。写完就后悔了,骂造轮子的人可能已经在路上了。真心讨厌那些自己分享不出好东西,又喜欢匿名喷人的人,总拿别公司的已有的模仿不来的火箭飞机大炮了来喷人,自己却造不出自行车。只吃别人嚼过的饭,永久体会不到吃热气腾腾散发小麦香馒头的乐趣。记录自己学习研究的过程,把别人的一些好的分享化为己用(要喷喷他们去吧😂 ),仅此而已,不喜看的也没收你一分钱,关掉就好。以上信息百度收集整理,如有错误欢迎指正批评。也欢迎有兴趣的小伙伴一起交流,一起学习进步。

特别致谢

@raowm520 发帖介绍和给予的帮助

参考

w3 Navigation Timing
MSDN Navigation Timing
WEB 自动化性能测试
chrome devtools protocol——Web 性能自动化实践介绍

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
共收到 21 条回复 时间 点赞

遇到一些要登录的链接怎么处理~

要登录的链接好像搞不定呢,我还没有研究,抱歉。
@raowm520 大神方便的话看看,这个问题怎么解决😂

额,我不是大神,要登陆的话可以跟自动化结合进行自动化登录

回复

好的,多谢,我研究一下看看 @Rajor

可以跟UI自动化集成起来,自动化跑完,性能报告也出来了👍

@success 这个是偏 web 应该叫 front-end web 也就是 偏web网页前端 应用性能分析或调优吧?
传统的手工有 chrome 浏览器插件 https://developers.google.com/pagespeed/
https://developers.google.com/speed/
和 火狐插件 http://yslow.org/

https://github.com/sergeychernyshev/showslow/wiki 这个 showslow 开源的 也可以研究改造下.

arrow 回复

是的,我也是这样打算的,跑ui自动化时顺便收集一下前端性能的数据,完事后统计分析~

小马 回复

多谢小马哥指教,我研究学习一下你发的资料链接

小马 回复

😆 搞好了 发我用用

hello #10 · November 19, 2018 作者
小马 回复

还有这么多问题没想法呢。离搞定还太远呢。😂 😂
首屏时间的取得还没头绪
业界各个指标参考值,不知道多少
打算做UI自动化时采集还没接入
监控和报告模块还没想好设计
和那些收费的平台差距功能巨大
前端性能资料少,BAT的思想思路不知道也模仿不来

hello 回复

工程量巨大啊
APM 的监控 你可以看看 google 的dapper http://bigbully.github.io/Dapper-translation/ 老祖宗级别的
http://naver.github.io/pinpoint/ 这玩意 pinpoint 社区里好像有人分享过.
https://www.jianshu.com/p/3a04ef81d35f

hello #12 · November 19, 2018 作者
小马 回复

是巨大而且现在我们组就我一个人玩。小马哥藏货很多啊👍

hello 回复

要形成团队 "团伙作案" 目前最大的团伙 就是 美团 点评团伙了....... 他们弄的很高级 人员团队也很庞大 自个儿弄

公司都不知道 你在做些神马玩意儿....

hello #14 · November 19, 2018 作者
小马 回复

是的,是的。我感觉我也就是要停留了解一下而已了😂

hello 回复

https://www.jianshu.com/p/c8b0cfd9e86e

这个你也研究下吧... Skywalking是国人-吴晟大佬个人开源的项目,并且被搜录到了Apache基金会当中持续开源。

官方github地址:https://github.com/apache/incubator-skywalking

hello #16 · November 19, 2018 作者
小马 回复

非常非常感谢,我研究一下,这方面资料太少了。👍 👍 👍


为啥我的这些数据感觉都不像是真的


我看的资料跟你的不一样啊

hello #19 · September 19, 2019 作者
迷茫测试 回复

这个耗时算法不知道谁的对。也没个明确规范真让人忧伤。
你的数据感觉差异那么多啊

hello 回复

前面的数据是调试的数据,最后一行的数据是最后的,看着我感觉也不像

Author only
需要 Sign In 后方可回复, 如果你还没有账号请点击这里 Sign Up