WEB前端性能分析--工具篇【转】

在线网站类:

WebPageTest

说明:

在线的站点性能评测网站,地址http://www.webpagetest.org/

补充:

其实这网站也是个开源项目,所以支持自己搭建一个内部的测试站点

ShowSlow

说明:

showslow是yslow的数据收集与展示平台http://www.showslow.com/,它是一个开源的php项目,可以用来与firefox的yslow插件、page speed插件或者dynatrace通信,收集插件或程序所发送过来的信息并集中展示。只需要在dynatrace安装目录下进行一些设置,即可自动实现上传结果到showslow平台作为存档、分析及监控。

浏览器插件类: 

FireBug

这个不用说了,它可以对页面进行调试,可以记录所有网页的访问耗时,下载的资源等。

Page Speed

说明:

基于firebug的web页面优化的评测工具,同时还有支持chrome的插件,因为是google产的。

使用:

直接打开FF的firebug或chrome的开发人员工具,切换到page speed标签,浏览一个网页然后点击分析即可,分析完成后会针对规则打出一个成绩,并告诉你哪些规则你没有符合。

其评分规则27条规则:

https://developers.google.com/speed/docs/best-practices/rules_intro

对几个网站的分析结果如下:

Google.cn 99分

Baidu.com 98分

360buy.com 98分

Taobao.com 89分

Dangdang.com 83分

补充:

其实这个更像是代码的白盒测试分析工具,因为其都是根据一定的规范来检测网页的
优化程度,而不是实际的去监听和过滤页面访问所花费的时间。当然一个网页的加载时间和很多因素有关;比如网速,比如页面上的内容,不同的网站加载时间肯定
是不一样的,这个就每一个用一个规则来确定一个怎么的网站应该要多长的加载时间了,因此这只是一个最佳实践规则和建议的检测工具;还有一点就是如果想看页
面访问时间的细节,firebug和chrome的开发人员工具本身就已经有了。

Speed Tracer

说明:

基于chrome的插件,同样是有google产的,这个是web前端页的性能记录和分析工具,同时还提供一个规则和建议的评测。

使用:

https://developers.google.com/web-toolkit/speedtracer/get-started

补充:

这个工具收集的东西主要是资源或事件消耗的时间,它会实时的记录某个页面的加载过程,并且一直跟踪所有的事件;在易用性方面数据可以到出来,还有可以根据时间轴来分析具体某端的性能规则和建议。

Yslow

说明:

基于firebug的评测分析工具,yahoo产;和page speed类似工具,会给出页面的评分和优化说规则,同时会提供页面下载资源的统计分析功能,还提供了一些小工具,如js运行检测,图片的优化工具,未符合规则的资源有哪些等等。总的来说是page speed的增强版。

Yslow优化建议23条规则:

http://developer.yahoo.com/performance/rules.html

各网站的评分:

Google.cn 67分

Baidu.com 94分

360buy.com 77分

Taobao.com 70分

Dangdang.com 71分

独立程序类:

DynaTrace Ajax Edition

说明:

基于IE,firefox的插件,对于FF需要版本支持,需要独立安装文件(50多M)。其可支持到函数级的度量分析,此外其它工具能支持的功能这个工具都支持的。

DynaTrace优化建议规则:

http://community.dynatrace.com/ext/ajax/PUB/Best+Practices+on+Web+Site+Performance+Optimization

Fiddler

说明:

Microsoft的一款web调试工具,它会记录所有本地的http通信。同时支持ie插件版

HttpAnalyzer

说明:

和fiddler原理一样的工具,不过功能比fiddler更加易用。同时支持ie,ff插件版,此外独立版程序提供http调试功能,写基于http通信的程序使用这个调试比较不错,之前写接口测试工具时就用的这个调试的。

HttpWatch:

说明:

以前这个和httpanalyzer都用过,后来就只用后者了;今天突然发现放弃它的原因是它只支持插件版的,即只能在浏览器上使用,而且只能抓对
应浏览器的http通信,且不支持http通信的调试;不过现在发现了一个比httpanalyzer好的就是它的页面加载用时的统计功能,是可以统计一
个页面总用时什么的,所以这个工具更适合用于站点的页面性能分析。

总结:

这些个工具里有些类似,有些用处各不相同,有些事专门的web前端性能评测工具,有些并不是为了web前端性能而做的工具。总的来说就是要结合实际情况,综合这些个工具来用,需要分析什么情况就用什么工具。如果是通常意义上的web前端性能测试的话,可以选择一个固定的方案,比如:DynaTrace + showslow,前者获取非常丰富的数据,后者则在服务端专门展示这些数据,即方便使用又方便存储。如果要支持持续测试的话,可以写自动化的脚本来跑具体的页面,每次新版本都执行一次自动化测试即可。

时间: 2024-07-31 14:35:20

WEB前端性能分析--工具篇【转】的相关文章

转 WEB前端性能分析--工具篇

在线网站类: WebPageTest 说明: 在线的站点性能评测网站,地址http://www.webpagetest.org/ 补充: 其实这网站也是个开源项目,所以支持自己搭建一个内部的测试站点 ShowSlow 说明: showslow是yslow的数据收集与展示平台http://www.showslow.com/,它是一个开源的php项目,可以用来与firefox的yslow插件.page speed插件或者dynatrace通信,收集插件或程序所发送过来的信息并集中展示.只需要在dyn

转 web前端性能分析--原理篇

转自http://blog.csdn.net/five3/article/details/7686715 web前端性能: 即是web用户在访问一个页面时所要花费的时间总和.即一个完全意义上的用户响应时间,相对于服务器的响应时间而言还会包括更多的内容和影响因素.那么一个web页面的完整请求包括了哪些部分的时间总和就是web前段性能分析和优化所需要了解的基础知识,先了解一下用户从浏览器访问一个url后到页面完全展示所有内容的整个过程吧. 页面的请求过程: 1.浏览器的url请求2.递归寻找DNS服

转 web前端性能分析--分析篇

通过具体实施后就可以获得第一手的web前端性能的数据了,然后每次新版本都跑,这就会获得大量的数据,为性能分析提供了基础的输入,同时应该还要综合使用多种工具去从不同的方向收集数据:比如showslow同时还支持yslow,pagespeed,webpagetest等测试工具传上去的数据,因此在具体的分析之前要从纵向.横向来收集数据,这样统计分析出来的结果才能有实际的参考价值.当然如果你还发现其它工具也可以提供一些性能数据,也可以收集起来,比如:httpanalyzer,httpwatcher都支持

转 web前端性能分析--实践篇

当我们知道了web前端性能的关键点后,那么接下来要做的就是如何去具体实施并获取这些关键点的数据了.通过前面的学习知道了不少好的工具,经过对比后个人觉得dynatrace还是不错的. 不仅支持ie,ff浏览器,还具备js函数级别的优化分析,它的分析数据也是最全面的,分析数据可以导出,最后和yslow,pagespeed一样支持向showslow上面传送结果信息这样就节省了很多的事情了.所以实施方案具体确定为dynatrace用来捕获web前端页面访问的性能数据,然后上传至showslow来浏览测试

Web前端性能分析

Web前端性能通常上代表着一个完全意义上的用户响应时间,包含从开始解析HTML文件到最后渲染完成开始的整个过程,但不包括在输入url之后与服务器的交互阶段.下面是整个过程的各个步骤: 开始解析html文件,从head到body按顺序从上到下. 当解析到head部分的css外部链接时,同步去下载,如果遇到外部js链接也是下载 接着解析body部分,边解析边开始生成对应的DOM树,同时等待css文件下载 等到css文件下载完毕,那么就同步去用已经生成的DOM节点+css去生成渲染树 渲染树生成结构模

MySQL监控、性能分析——工具篇

MySQL越来越被更多企业接受,随着企业发展,MySQL存储数据日益膨胀,MySQL的性能分析.监控预警.容量扩展议题越来越多.“工欲善其 事,必先利其器”,那么我们如何在进行MySQL性能分析.监控预警.容量扩展问题上得到更好的解决方案,就要利用各种工具来对MySQL各种指标进行分 析.本文是读书笔记,下面提及的工具,读者可能都用过,或打算准备是使用.MySQL服务器的发布包没有包含那些能完成许多常见任务的工具,例如监控服务器的工具.比较服务器间数据的工具.我们把这些工具分成以下几类:界面.监

前端和云端性能分析工具分析报告

性能测试工具的主要作用是通过模拟生产环境中的真实业务操作,对被测试系统实行压力负载测试,监视被 测试系统在不同业务.不同压力性能下的性能表现,找出潜在的性能瓶颈进行分析.优化. 客户端与服务器相当于两个人,通过信息来进行交流.由于初次见面不好意思直接交流,与是找来了中间传话人,客户端把信息告诉给传话人,由传话人来转达给服务器.那么服务器反馈的信息也由传话人转达给客户端.一般性能测试工具都需要录制或编写客户端行为脚本. 这样传达人就有了客户端的行为能力,从而假扮客户端来欺骗服务器,与之进行通信.有

几款前端性能检测工具

在线网站类: WebPageTest 说明: 在线的站点性能评测网站,地址http://www.webpagetest.org/ 补充: 其实这网站也是个开源项目,所以支持自己搭建一个内部的测试站点 ShowSlow 说明: showslow是yslow的数据收集与展示平台http://www.showslow.com/,它是一个开源的php项目,可以用来与firefox的yslow插件.page speed插件或者dynatrace通信,收集插件或程序所发送过来的信息并集中展示.只需要在dyn

前端性能分析

前端性能分析 最近在读一本经典书<高性能网站建设进阶指南>. 虽然书籍很多年前就出版了,但里面的内容还是耐人寻味,这次就好好的实践了一下. 纸上得来终觉浅,绝知此事要躬行,实践中将会发现一些问题. 有个官方网址<Even Faster Web Sites>,点击“Run the Examples”按钮,就能进入在线demo. 在Github上面有个叫awesome-wpo的项目,里面记录了各个方面关于性能的资源,有书籍.文章.工具等. 下面所有的实验都是在Chrome 49浏览器中