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

前言

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

相关姿势

百度到的姿势,大都是基于 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 性能自动化实践介绍

发表评论