WEB 前端性能分析工具篇

本贴最后更新于 2303 天前,其中的信息可能已经水流花落
web工具firebugchrome优化microsoft

在线网站类:

WebPageTest

说明:

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

补充:

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

ShowSlow

说明:

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

浏览器插件类: 

FireBug

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

 Page Speed

说明:

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

使用:

直接打开FFfirebugchrome的开发人员工具,切换到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

补充:

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

 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

说明:

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

DynaTrace优化建议规则:

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

 Fiddler

说明:

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

 HttpAnalyzer

说明:

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

 HttpWatch:

说明:

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

总结:

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

  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖
  • 监控
    26 引用 • 33 回帖 • 1 关注
  • 性能
    63 引用 • 180 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • wolai

    我来 wolai:不仅仅是未来的云端笔记!

    2 引用 • 14 回帖 • 2 关注
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    494 引用 • 928 回帖 • 1 关注
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 554 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    5 引用 • 16 回帖
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 394 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 493 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖 • 2 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    184 引用 • 1015 回帖
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖 • 4 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 3 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff)、语法高亮、全面的帮助系统、本地脚本(Vimscript)和便于选择的可视化模式。

    29 引用 • 66 回帖
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    245 引用 • 1338 回帖
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 72 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    124 引用 • 74 回帖 • 2 关注
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    57 引用 • 25 回帖 • 3 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖
  • 音乐

    你听到信仰的声音了么?

    62 引用 • 512 回帖
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    210 引用 • 2040 回帖
  • Anytype
    3 引用 • 31 回帖 • 14 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 177 关注