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/
   
目录
相关文章
|
5月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
515 108
|
3月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
315 1
|
3月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
盒模型 盒模型: 所谓盒模型,就是浏览器为页面中的每个HTML元素生成的矩形盒子。 这些盒子们都要按照可见板式模型在页面上排布。 可见的板式模型主要由三个属性控制:position 属性、display 属性和 float属性。 position属性控制页面上元素间的位置关系。 display属性控制元素是堆叠、并排或者不在页面上显示。 float属性提供控制的方法,以便于把元素组成成多栏布局。 盒模型讲解: 在默认的情况下,每个盒子的边框是不可见的,背景也是透明的。 所以我们 不能直接的看到页面中的盒
201 1
|
6月前
|
运维 前端开发 JavaScript
前端埋点校验工具:数据驱动的最后一道防线
数据埋点是企业决策的关键基础,但常面临覆盖率低、数据不准和故障难排查三大难题。本文深入剖析了这些问题的成因与影响,并提出“三维校验矩阵”解决方案:提升覆盖率至99.8%、降低错误率至0.3%、提速故障定位5倍。同时对比Split.io、Tealium、Sentry、板栗看板等工具优劣,为企业选型提供参考。迈向高质量数据治理,从精准埋点开始。
|
3月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
Animation属性 css3为Animation动画提供的几个属性如下: 属性名 属性值 animation-name 指定动画名称,该属性指定一个已有的关键帧定义。 animation-duration 指定动画持续时间。 animation-timing-funtion 指定动画变化速度。 animation-delay 指定动画延迟多长时间才开始执行。 animation-iteration-count 指定动画的循环执行次数。 animation:这是一个复合属性。
305 2
|
3月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
position定位(核心) 我们讲盒模型的时候,提到了3个属性可以用来控制页面排版。 三大属性:position属性,display属性,float属性。 position 属性控制页面上元素间的位置关系。 display 属性控制页面元素是否显示或者是堆叠还是并排显示。 float 属性提供控制方法。 通过float这种控制方法,可以实现多栏布局,导航菜单等等。 position属性是干嘛用的?怎么用?有哪些属性值? position属性控制页面上元素间的位置关系,也就是排版。 怎么用?要知道怎么用
454 1
|
5月前
|
运维 数据可视化 C++
2025 热门的 Web 化容器部署工具对比:Portainer VS Websoft9
2025年热门Web化容器部署工具对比:Portainer与Websoft9。Portainer以轻量可视化管理见长,适合技术团队运维;Websoft9则提供一站式应用部署与容器管理,内置丰富开源模板,降低中小企业部署门槛。两者各有优势,助力企业提升容器化效率。
422 1
2025 热门的 Web 化容器部署工具对比:Portainer VS Websoft9
|
7月前
|
Web App开发 编解码 移动开发
零基础音视频入门:你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程,同时还介绍了视频的编码、帧率、比特率等概念,提到了Canvas作为视频播放的替代方案,以及FFmpeg在音视频处理中的重要作用等知识。
234 1
|
8月前
|
XML 安全 前端开发
一行代码搞定禁用 web 开发者工具
在如今的互联网时代,网页源码的保护显得尤为重要,特别是前端代码,几乎就是明文展示,很容易造成源码泄露,黑客和恶意用户往往会利用浏览器的开发者工具来窃取网站的敏感信息。为了有效防止用户打开浏览器的 Web 开发者工具面板,今天推荐一个不错的 npm 库,可以帮助开发者更好地保护自己的网站源码,本文将介绍该库的功能和使用方法。 功能介绍 npm 库名称:disable-devtool,github 路径:/theajack/disable-devtool。从 f12 按钮,右键单击和浏览器菜单都可以禁用 Web 开发工具。 🚀 一行代码搞定禁用 web 开发者工具 该库有以下特性: • 支持可配
752 22
|
10月前
|
JSON 人工智能 前端开发
前端开发中使用whistle代理工具
Whistle是一款强大的代理工具,相比Charles、Fiddler更轻量且功能丰富。它适用于前端开发中的多种场景,如接口数据Mock、接口代理、静态资源代理等。通过简单的规则配置,可将接口指向本地JSON文件,解决跨域问题,或代理静态资源以满足特定域名访问需求。此外,Whistle还支持本地端口间转发与移动端请求抓包,搭配SwitchyOmega插件使用效果更佳。需注意,使用前请确保已安装Node环境并参考官方文档完成基础配置。

热门文章

最新文章