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,前者获取非常丰富的数据,后者则在服务端专门展示这些数据,即方便使用又方便存储。如果要支持持续测试的话,可以写自动化的脚本来跑具体的页面,每次新版本都执行一次自动化测试即可。

   

最新内容请见作者的GitHub页:http://qaseven.github.io/

   

时间: 2025-01-30 16:02:11

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

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

web前端性能: 即是web用户在访问一个页面时所要花费的时间总和.即一个完全意义上的用户响应时间,相对于服务器的响应时间而言还会包括更多的内容和影响因素.那么一个web页面的完整请求包括了哪些部分的时间总和就是web前段性能分析和优化所需要了解的基础知识,先了解一下用户从浏览器访问一个url后到页面完全展示所有内容的整个过程吧. 页面的请求过程: 1.浏览器的url请求 2.递归寻找DNS服务器 3.连接目标IP并建立TCP连接 4.向目标服务器发送http请求 5.web服务器接收请求后处理

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

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

PHP性能分析工具XHProf安装使用教程

  这篇文章主要介绍了PHP性能分析工具XHProf安装使用教程,本文给出详细安装步骤和配置方法以及使用实例,需要的朋友可以参考下 HProf是facebook开源出来的一个php轻量级的性能分析工具,跟Xdebug类似,但性能开销更低,还可以用在生产环境中,也可以由程序开关来控制是否进行profile.基于浏览 器的性能分析用户界面能更容易查看,或是与同行们分享成果.也能绘制调用关系图.在数据收集阶段,它记录调用次数的追踪和包容性的指标弧在动态callgraph的一个程序. 它独有的数据计算的

Web前端性能优化全攻略

Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端优化最佳实践之 内容篇Web 前端优化最佳实践之 Server 篇Web 前端优化最佳实践之 Cookie 篇Web 前端优化最佳实践之 CSS 篇Web 前端优化最佳实践之 JavaScript 篇Web 前端优化最佳实践之 图象篇Web 前端优化最佳实践之 Mobile(iPhone) 篇 Yahoo! 的 Exceptional Performance team 在 Web 前端方面作

IE浏览器性能分析工具

  DynaTrace AJAX是一个运行在IE浏览器下的免费页面性能分析工具,它可以支持主流的IE6.IE7.IE8浏览器.这款工具正是DynaTrace为进入前端性能分析领域而发布的.您可以利用它来分析页面渲染时间.DOM方法执行时间,甚至可以看到JS代码的解析时间.连JQuery的创始者 John Resig 也鼎力推荐了一把. John Resig对其评价到:"我一般不随便写关于性能分析工具的东西,坦率地说,我感觉它们绝大部分都比较烂,根本不能提供任何有价值的信息和分析结果.不过 dyn

关于VS2012自带的 性能分析 工具使用实例(图文介绍)_实用技巧

本篇通过一小段代码的console程序来进行性能的分析以及改进.直到后面的改进前.改进后性能比较结果. 先看console代码(源代码下载): 复制代码 代码如下: static void Main(string[] args)        {            int i = 10000;            while(i-->0)            {                Core c=new  Core();                c.Process(Dat

Linux性能分析工具汇总合集

出于对Linux操作系统的兴趣,以及对底层知识的强烈欲望,因此整理了这篇文章.本文也可以作为检验基础知识的指标,另外文章涵盖了一个系统的方方面面.如果没有完善的计算机系统知识,网络知识和操作系统知识,文档中的工具,是不可能完全掌握的,另外对系统性能分析和优化是一个长期的系列. 本文档主要是结合Linux 大牛,Netflix 高级性能架构师 Brendan Gregg 更新 Linux 性能调优工具的博文,搜集Linux系统性能优化相关文章整理后的一篇综合性文章,主要是结合博文对涉及到的原理和性

php轻量级的性能分析工具xhprof的安装使用_php技巧

一.前言 有用的东西还是记录下来吧,也方便以后的查询:这次记录一下xhprof的安装使用: xhprof是facebook开源出来的一个php轻量级的性能分析工具,跟Xdebug类似,但性能开销更低, 还可以用在生产环境中,也可以由程序开 关来控制是否进行profile. 二.安装 wget http://pecl.php.net/get/xhprof-0.9.3.tgz tar zxf xhprof-0.9.3.tgz cd xhprof-0.9.3/extension /usr/bin/ph

PHP性能分析工具XHProf安装使用教程_php技巧

HProf是facebook开源出来的一个php轻量级的性能分析工具,跟Xdebug类似,但性能开销更低,还可以用在生产环境中,也可以由程序开关来控制是否进行profile.基于浏览 器的性能分析用户界面能更容易查看,或是与同行们分享成果.也能绘制调用关系图.在数据收集阶段,它记录调用次数的追踪和包容性的指标弧在动态callgraph的一个程序. 它独有的数据计算的报告/后处理阶段.在数据收集时,XHProfd通过检测循环来处理递归的函数调用,并通过给递归调用中每个深度的调用一个有用的命名来避开