• 0
  • 0
分享
  • 测开必备,推荐几款前端性能测试工具、神器——软件测试圈
  • 曼倩诙谐 2022-12-16 11:04:36 字数 2678 阅读 8661 收藏 0

  2022软件测试行业前景如何?结果你来预测。链接:http://vote.51testing.com/  (笔给你,你来填~)


  我们在使用网站过程中,经常会遇到慢的问题,为了找到原因,一般需要借助工具进行检测,通过工具,可以检测出前端站点加载资源的相关详细情况。

  今天,就给大家介绍几款前端性能测试分析工具,结合性能测试工具,实现通过量化的方式测试网站中诸如首字节加载时间(time to first byte)或者渲染时间等表现。其中有些工具还会检查资源是否被缓存,多个 CSS 或 JS 文件是否值得合并,最后自动给出前端性能优化改进建议报告,如果对你有用的话,欢迎收藏转发。

  1、 Lighthouse

  Lighthouse是一个开源的自动化工具,用于帮助改进网络应用的质量。可将其作为一个 Chrome扩展程序运行,或从命令行运行。Lighthouse分析web应用程序和web页面,收集关于开发人员优秀实践的现代性能指标和见解,让开发人员根据生成的评估页面,来进行网站优化和完善,提高用户体验。

  当为 Lighthouse 提供一个要审查的网址,它将针对此页面运行一连串的测试,然后生成一个有关页面性能的报告。可以参考失败的测试,看看可以采取哪些措施来改进应用。

  使用入门

  运行 Lighthouse 的方式有两种:作为 Chrome 扩展程序运行,或作为命令行工具运行。 Chrome 扩展程序提供了一个对用户更友好的界面,方便读取报告。 命令行工具允许您将 Lighthouse 集成到持续集成系统。

  Chrome 扩展程序

  下载 Google Chrome 52 或更高版本,接着安装 Lighthouse Chrome 扩展程序。

1-1.jpg

  命令行工具

  安装 Node,需要版本 5 或更高版本。

  安装 Lighthouse 作为一个全局节点模块。

  npm install -g lighthouse

  针对一个页面运行 Lighthouse 审查。

  lighthouse https://www.xxx.com/

  传递 --help 标志以查看可用的输入和输出选项。

  lighthouse --help

  2、SpeedCurve

  SpeedCurve 可以帮助追踪自己的性能表现,以及竞争对手的性能表现。它可以用来查看某个因素在不同站点的速度表现,并且还提供了综合监控。综合监控是在受控环境中模拟网站。在其中可以自定义选项,比如网络速度、设备、操作系统等等。

1-2.jpg

  3、Pingdom

  在Pingdom输入 URL 地址,即可测试页面加载速度,分析并找出性能瓶颈。帮助用户找出影响网站速度的原因,并给出改善网页性能的可行性方案,很适合做网站的用户。

  地址:

  https://www.pingdom.com/
  https://tools.pingdom.com/

   1-3.jpg

  4、PageSpeed Insights

  Google Page Speed Insight(PSI)是一款旨在优化所有设备上的网页、提高网页加载速度的工具。它提供免费服务,可以分析网页的内容,提出建议,加快网页的速度。它为您提供了关键指标,如第一个内容绘制,总阻塞时间和更多。度量标准被分类为Field Data、Origin Summary,Lab Data,Opportunities、Diagnostics 和Passed Audits。

  在线版:

  https://developers.google.com/speed/pagespeed/

  你可以从chrome应用商店里找到PageSpeed Insights插件。

  点击open 在线分析性能,也可以测试本地的项目通过PageSpeed,点击Start analyzing运行一会就显示分析结果。

1-4.jpg

  分析后的效果:

1-5.jpg

  5、SpeedTracker

  SpeedTracker运行在WebPageTest上,可定期进行网站性能测试,并显示各种性能指标随时间的变化。这个功能可以帮助不断评估网站,并查看新功能如何影响网站的性能,还可以定义预算并通过电子邮件和Slack获取警报。

  官网:

  https://speedtracker.org/

  项目地址:

  https://github.com/speedtracker

1-6.jpg

  6、WebPageTest

  WebPageTest是一个在线性能评测网站, 它是一个非常详细且专业的web页面性能分析工具,而且开源的!支持IE,Chrome,使用真正的浏览器(IE和Chrome)和真实的消费者连接速度,从全球多个地点运行免费网站速度测试。WebpageTest 主要提供了Advanced Testing、simple Testing、Visual Comparison、Traceroute四个功能。

  项目地址:

  https://www.webpagetest.org/

1-7.jpg

  可以运行简单的测试或执行高级测试,还会依据测试结果提供丰富的诊断信息,包括资源加载瀑布图,页面速度优化检查和改进建议,会给每项内容一个最终的评级。

1-8.jpg

  如果你打不开其官网,或者担心安全问题,你可以自己拿源码搭建这个平台工具。

  7、Sitespeed.io

  Sitespeed.io 是开源的Web性能测试工具,用来衡量Web网站的综合性能,帮助开发和测试人员分析网页的加载速度和渲染性能。Sitespeed.io通过驱动浏览器(如:Chrome、Firefox)进行测试,然后从开发者的站点收集多个页面的数据,并根据优秀实践等规则来分析这些网页,然后将结果以HTML报告的形式输出。

  项目地址:

  https://github.com/sitespeedio/sitespeed.io

  安装sitespeed.io之后,如果要分析一下百度PC首页性能,执行以下命令:

  sitespeed.io  -n 5 -v https://www.baidu.com

  该命令将会在chrome浏览器下调起URL为https://www.baidu.com 5次,产出了一个分析文件夹,打开index.html文件后,我们可以看到关于页面性能的相关总结。

1-9.jpg


作者:狂师    

来源:http://www.51testing.com/html/32/n-4476932.html

  • 【留下美好印记】
    赞赏支持
登录 后发表评论
+ 关注

热门文章

    最新讲堂

      • 推荐阅读
      • 换一换
          •  1、引言由于最近从某些企业毕业的同学很多,导致很多同学不得不投简历,找工作。作为面试官的我,在最近也是没少忙活。小屌丝:鱼哥,最近听说你最近睡得挺晚的。小鱼:你咋知道, 你是不是在我的电脑安装了什么.... 小屌丝:鱼哥,我这么正经, 怎么能干那么流氓的事情....  小鱼:那你咋知道我睡得晚。小屌丝:用脚指头就能想到, 最近上海有很多企业的同学毕业了,所以....会有一些毕业的同学约你帮忙看简历,聊聊面试技能之类的吧。小鱼:嗯,最近在公司也面试了不少的同学,但是,这些同学的共性之一都是,对linux的命令不太熟, 小屌丝:比方说呢?小鱼:如...
            1 0 896
            分享
          • 跟一位朋友聊侃职业发展,她以前也是IT圈的妹子,后来华丽转行。她知道我做过很长时间的测试,而且做的还不错。大概她是看到了我日常行事风格里也表现出了很强的测试思维—找问题,解决问题,追求完美,但似乎又不相信有什么事情是完美的。她跟我说:“测试我也做过一段时间的,现在觉得,就算有一天我拖着棍子去要饭,我也不会再回头去做测试!”因为她忍受不了这种以找bug为目标的工作。 我被她这句话伤害到了,尽管她一再表示,她绝对没有贬低测试这个行当的意思。   其实我当下的主要工作已经不是做测试了,但是项目偶尔缺人的时候,还是会被拉去帮忙。就在...
            2 5 2569
            分享
          •   参数化概念  测试工作中,通常会使用不同的数据发送请求测试不同的场景来实现测试的全面性,这就需要对一些字段进行参数化,以使每次迭代都使用不同的数据来满足我们的测试需求。  Jmeter做为常用的功能、性能测试工具之一,其参数化方式也是相对比较灵活,主要分为4种:用户参数、用户自定义变量、CSV数据文件、函数助手,下面将详细介绍这4种参数化方式的使用方法。  参数化方式  一、用户参数  1.使用场景  适用于参数取值范围很小的场景,例如测试模拟较少用户登陆某系统交易。  2.操作步骤  (1)添加用户参数功能模块  (2)设置参数变量、用户值  注意勾选每次迭代更新一次,否则每次都使用同样...
            14 15 1313
            分享
          • 移动智能设备已成为我们日常生活的一部分,我们比以往任何时候都更加依赖它们。随着 5G 在不久的将来的出现,用户利用智能手机和移动数据提供的潜力的方式将是惊人的。越来越多的需求都会转移到移动设备上实现。拥有一个响应式网页设计,可以更快、更高效地在众多设备上运行,这是组织面临的挑战。这里重要的是通过严格的测试确保您的网站提供统一的体验。在本文中,我们将详细了解移动 Web 测试的方法、不同的测试策略以及可以减轻测试过程复杂性的工具。响应式网页设计对于许多人来说,响应式这个词并不新鲜!然而,随着我们多年来移动用户的惊人增长,响应式设计已成为任何企业的关键。它使响应式测试成为绝对必要的。响应式网页设计...
            0 0 607
            分享
          •   免费的性能测试框架搭建课程快来领啊,成功提交问卷后还有精选好课任你挑选,数量有限,先填先得~链接:http://vote.51testing.com/  早些时候,京东家电出了一个事故。  部分用户在领取京东的无门槛优惠券之后,可以用极低的价格(几十块几块甚至0元)购买数百元的小家电,主要是烤箱及微波炉类产品。  吸引了不少羊毛党,前来薅羊毛。  传闻在极短的时间里,出现了24万笔低价订单,涉及商品金额数千万。  关于此次事故,引发了圈子的热烈探讨。  影响面无疑是巨大的,甚至有传闻说,小家电组全部开除!但其实传言难辨真假,我们作为吃瓜群众,并非内部人士,也不清楚后续的处理情况。  假如抛...
            2 4 6130
            分享
      • 51testing软件测试圈微信