• 网页前端页面加载性能测试各工具可行性方案分析


    网页前端页面加载性能测试各工具可行性方案分析

    征对各个浏览器和工具做了测试,之所以选择的是百度首页测试,因为其比较单一,没有多层嵌套和持续加载,尽量减少其他影响,测试中发现目前有些方案是不可行的,后面征对各个测试结果给出了可行方案和不可行的建议。

    1 .webbrowser(内核IE10)和IE10浏览器的比较:

    Webbrowser的测试方法为,先执行清除浏览器缓存,从开始导航开始计时,DocumentCompleted时间将2次触发,取最后一次的时间,按照DocumentCompleted解释,这个时间相当于全部元素loa完毕,测试结果如下:

    clip_image002

    接下来打开IE工具测试,先执行清除浏览器缓存测试结果如下

    clip_image004

    结论:经过多次测试,可以看到,Webbrowser和IE工具测试的结果相当接近!

    Webbrowser 的DocumentCompleted时间即为IE工具的全部元素加载时间

    2 HTTP抓包工具Fiddler结果测试:

    clip_image006

    结束时间

    clip_image008

    抓包IE10结果如下:

    开始14:15:59:6241

    结束14:16:00:1082 两者间隔为481毫秒。

    抓包Webbrowser结果如下:

    开始14:18:37:4179

    结束14:18:37:8689

    两者间隔451毫秒

    结论:1.IE10和Webbrowser网络加载时间基本相同,

    2 问题:Fiddler抓包的数据大于浏览器的计算时间?这个是不是Fiddler数据有问题?

    2.火狐的firebug工具测试:

    先清除浏览器缓存:

    clip_image010

    然后再打开百度

    clip_image012

    结论:怎么测试都在2000毫秒以上,搞不懂为什么比IE慢那么多?直眼睛都看得出来比IE慢!

    3. berserkjs测试

    这个不知道缓存是怎么搞,直接测试吧clip_image014

    可以看到这个间隔时间为246秒,首屏时间为:1894毫秒

    这个时间跟ie内核的差不多

    Fiddler测试抓包:

    14:34:09:7921

    14:34:10:2181

    426

    可以发现Fiddler抓包时间大于berserkjs的测试时间!

    .

    然后我又使用IE10做了个测试,关闭Fiddler用webbrowser测试时间为186毫秒

    打开Fiddler用webbrowser测试时间居然高达460毫秒!

    4测试结论:

    1. 浏览器对测试数据影响很大,3种种内核,最快的为webkit 246,也有可能这个东西没有外围的程序直接使用内核的关系,他是最快的,IE10次之为400,火狐最慢达到2000多,但是为什么火狐的速度那么慢,这个未能有答案。

    2. 查找各种资料,发现类似Fiddler这种工具使用的原理是,启动了Fiddler,程序将会把自己作为一个微软互联网服务的系统代理。作为系统代理,所有的来自微软互联网服务(WinInet)的http请求再到达目标Web服务器的之前都会经过Fiddle,同样的,所有的Http响应都会在返回客户端之前流经Fiddler,那么这就能解释为什么开启Fiddler后速度变慢了!

    这个就是经常说的网络劫持,类似的工具还有httpwach,httpanalyzer等,由此可见这种原理的测试数据会导致数据偏离实际,不建议使用!

    3. 不能使用Fiddler这种原理,由于webbrowser有限的功能和扩展,基本上不能取到har里面的数据,这个方案将不可行!

    4. 建议:使用berserkjs方案,目前IP未能解决,需想办法解决此问题!

  • 相关阅读:
    cube.js 上下文实践的一些说明
    sitespeed.io 开源web 性能监控&&优化工具集
    sideway/joi js 强大的data schma 校验框架
    cube.js 最新版本的一些特性
    cube.js 支持的类型以及格式化
    cube.js 多租户模式使用一个说明
    airbyte 基于singer 扩展的EL 平台
    cube.js dimensions 的一些说明
    cube.js measures 的一些说明
    cube.js 上下文变量
  • 原文地址:https://www.cnblogs.com/sung/p/3374215.html
Copyright © 2020-2023  润新知