• H5性能测试学习


    工欲善其事,必先利其器,在做H5前端性能测试之前,选择合适的工具能让我们的测试工作事半功倍。本文要提到的工具有两类:

    一类是抓包工具,如Fiddler、Charles等。这类工具不仅可以抓包,还可以对包进行修改,动态展示瀑布流,对web进行调试。在我们做H5前端性能测试的时候,个人觉得只要不修改包,不对H5调试,就可以放弃使用这类工具,不是工具不好,而是大材小用。

    还有一类,这里重点提到的是如Page Speed、PCAP Web Performance Analyzer、WebPagetest这类平台型工具。我们可以快捷的测试出H5前端性能中数据,视图,并给出一定程度的优化建议。

     

    (*以上为个人见解,如有疏漏和错误,请及时指正)

    以手机管家端午节运营活动H5为例,附上上述工具测试结果页,当然这里仅仅是结果的罗列。具体的分析还是需要测试人员来做,衡量是否符合当前运营需求。

    WebPagetest

     

    Page Speed:

     

    PCAP Web Performance Analyzer:

     

    Chrome DevTools:

     

    常见问题举例:

    同样以手机管家端午节运营活动H5为例:(完成整个加载性能测试耗时只需20分钟左右)

    1、HTTP请求过多

     

    图为PCAP Web Performance Analyzer解析pcap包的结果,图中我们可以看出,21个http请求中,有7个是统计点发出的请求。这里可以考虑统计点合并上报和首屏时减少上报统计点。

    2、图片空白部分太多

     

    这里需要用到的图片仅仅是作为右上角分享,但是在我们请求的图片确实整张完整的图。
    可以考虑请求小的切图,通过CSS控制图片显示位置。

     

    3、图片尺寸

     

    下面一张背景图,我们可以看到尺寸是1080X1919,然后当前市面上Android主流机型主要为 480x800, 480x854, 540x960, 720x1280, 800x1280 。所以,为每一个移动设备都提供一张1080X1919的图片实在没有必要。

     

    4、没有使用的资源

     

    下面这一幅图,在chrome DevTools中看到请求响应并下载成功,但是在实际的H5活动中并没有使用过。

     

    5、返回码非200

     
    • 非200的返回码意味着本次请求没有实质性的收获,如上图所示的两次非200请求返回值:

    • 404:上图请求图片时出现404:一方面,可能图片本身在H5中就不展示,所以这里直接去掉多余的连接就好了。另一方面,可能H5中需要该图片,而恰好访问结果为404,那此时就定位了一个bug 的存在。

    • 302:请求音乐时出现302重定向:从图中可以明显看出两次请求后才获取到背景音乐,从用户侧可能会感知是音乐加载速度慢。

    6、未使用CDN,未设置cache

     

    如果该运营活动是全国性的,且用户量很大,那么非常有可能网络“边缘”的用户没有办法正常访问该H5活动。  

    7、资源未压缩

     

    这里详细列出了各个没有压缩的图片资源。这里要建议的图片的压缩,如上图测试结果,压缩后可以减少16K的图片资源大小。还可以考虑是否采用图片地图来减少http请求。
  • 相关阅读:
    Solaris下批量kill掉oracle的session
    我写blog的方式变迁
    filezilla ftp client在win7 下获取ftp目录信息出错解决方法
    GNU System Monitor编译问题
    在vmware的Solaris虚拟机中安装vmtool
    关于golden gate director client的一点点使用总结
    测试 乱弹
    ORM的世界 (再补充)
    Yahoo Konfabulator
    轻量容器和注射依赖 的自实现
  • 原文地址:https://www.cnblogs.com/lxs1314/p/7009593.html
Copyright © 2020-2023  润新知