高性能WEB开发之Web性能测试工具推荐

WEB性能测试工具主要分为三种,一种是测试页面资源加载速度的,一种是测试页面加载完毕后页面呈现、JS操作速度的,还有一种是总体上对页面进行评价分析,下面分别对这些工具进行介绍,如果谁有更好的工具也请一起分享下。

Firebug:

Firebug 是firefox中最为经典的开发工具,可以监控请求头,响应头,显示资源加载瀑布图:


HttpWatch :

httpwatch 功能类似firebug,可以监控请求头,响应头,显示资源加载瀑布图。但是httpwatch还能显示GZIP压缩信息,DNS查询,TCP链接信息,个人在监控http请求比较喜欢使用httpwatch,

httpwatch包含IE和firefox插件。不过httpwatch专业版本是收费的,免费版本有些功能限制。


DynaTrace's Ajax Edition

dynaTrace 是本人常使用的1个免费工具,该工具不但可以检测资源加载瀑布图,而且还能监控页面呈现时间,CPU花销,JS分析和执行时间,CSS解析时间的等。


Speed Tracer:

speed trace 是google chrome的1个插件,speed trace的优势点是用于监控JS的解析执行时间,还可以监控页面的重绘、回流,这个还是很强的(dynaTrace也能有这个功能)。


注:安装这个插件,需要安装 Google Chrome Developer Channel 版本,但是这个链接的地址在国内好像打不开,如果打不开,请大家直接到这个地址去下载:

http://www.google.com/chrome/eula.html?extra=devchannel

Page Speed :

Page speed 是基于firebug的1个工具,主要可以对页面进行评分,总分100分,而且会显示对各项的改进意见,Page Speed也能检测到JS的解析时间。


yslow :

yslow跟pge speed一样是基于 firefox\firebug的插件,功能与page speed类似,对各种影响网站性能的因素进行评分,yslow是yahoo的工具,本人也一直在使用,推荐一下。


webpagetest :

webpagetest 是1个在线进行性能测试的网站,在该网站输入你的url,就会生成1个url加载的时间瀑布图,对所有加载的资源(css,js,image等等)列出优化的清单,也是非常好用的工具。
 



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
通过页面性能测试概念+页面加载过程+页面性能指标+页面性能测试工具的学习,可以学到如下内容:①WEB网站页面性能的指标(白屏时间、首屏加载完成时间、FP、FCP、DCL、CLS、FPS等);②WEB网站页面性能测试策略;③WEB网站页面加载过程(前端基础语言:HTML+CSS+JavaScript,DOM、CSSOM、渲染树、布局、绘制);④WEB网站页面性能测试工具的实际操作和功能介绍(开发工具:控制台、网络、性能、Lighthouse、FPS渲染统计等);⑤WEB网站页面性能测试报告编写。⑥WEB网站页面性能测试步骤和实际操作。课程内容:第一章:课程简介1、课程介绍2、课程大纲第二章:页面性能测试1、页面性能测试概念2、页面性能测试专业术语3、页面性能测试策略第三章:页面加载过程1、HTML概念,HTML5实例,HTML5文档2、CSS概念,CSS实例,CSS文档3、JavaScript概念,JavaScript脚本实例和作用4、DOM和CSSOM理解5、HTML5渲染引擎理解6、HTML5页面内容渲染的过程,HTML渲染树第四章:页面性能测试工具1、页面性能测试具体工具2、Chrome开发工具介绍第五章:页面性能测试工具-控制台:window.performance1、控制台:window.performance介绍2、window.performance.timing执行结果加载字段理解3、window.performance.timing执行结果属性对应页面阶段理解4、window.performance页面性能参数计算5、window.performance页面性能关键指标计算第六章:页面性能测试工具-网络面板1、Chrome-开发工具-网络面板介绍2、Chrome-开发工具-网络-瀑布流指标第七章:页面性能测试工具-性能面板1、Chrome-开发工具-性能面板-使用方法2、Chrome-开发工具-性能面板介绍3、Chrome-开发工具-性能面板-控制按钮区域4、Chrome-开发工具-性能面板-Overview区域5、Chrome-开发工具-性能面板-火焰图区域6、Chrome-开发工具-性能面板-内存图区域7、Chrome-开发工具-性能面板-统计汇总区域8、Chrome-开发工具-性能面板-统计汇总区域-摘要内容9、Chrome-开发工具-性能面板-统计汇总区域-事件时长、调用、发生顺序第八章:页面性能测试工具-FPS监控1、Chrome-开发工具-FPS监控-FPS介绍、FPS视觉效果、FPS查看方法第九章:页面性能测试-Lighthouse面板1、Chrome-开发工具-Lighthouse介绍、操作方法、运行的生命周期2、Chrome-开发工具-Lighthouse报告指标分析3、Chrome-开发工具-Lighthouse的报告优化建议第十章:页面性能测试工具-Performance insights面板1、Chrome-开发工具-Performance insights操作方法2、Chrome-开发工具-Performance insights分析报告第十一章:网速调研1、全国网速的调研和本机网速测试第十二章:页面性能测试总结1、页面性能测试指标采集方式2、页面性能测试报告3、页面性能测试-操作步骤​

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值