前端性能测试之分析篇

引言

前一章,我们讲了browser的工作原理,那么怎么样才能让了解整个主站前端的性能呢?监控! 对,是的,我们可以利用各种工作对我们的website进行实时的监控,目前监控的方式有两种。

类型 优点 缺点 示例
非侵入式 指标齐全、客户端主动监测、竞品监控 无法知道性能影响用户数、采样少容易失真、无法监控复杂应用与细分功能 Pagespeed、yslow、PhantomJS、webpagetest、sitespeedio
侵入式 真实海量用户数据、能监控复杂应用与业务功能、用户点击与区域渲染 需插入脚本统计、网络指标不全、无法监控竞品 new relic、Google analyse、oneapm

前端性能分析工具

那有哪些简易便利的工具能帮助我们更好的进行测试呢?
ok,工具集锦来临。

浏览器插件类

  1. FireBug
    它可以对页面进行调试,可以记录所有网页的访问耗时,下载的资源等
  2. Page Speed
  3. Yslow
  4. page performance
  5. performance analyse

在线网站类

  1. WebPageTest
  2. showslow
  3. sitespeed.io

    平台类

    收费服务平台

  4. google_analytics
  5. new relic
  6. oneapm

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

时间: 2024-10-29 00:24:06

前端性能测试之分析篇的相关文章

SQL Server 2005性能测试之CPU篇(编译与重编译)

如果在没有额外复杂条件下突然出现CPU瓶颈,有可能是因为没有优化查询,错误的数据库配置,或者是数据库设计上的原因和硬件资源不足引起.在决定采用增加CPU数量或者使用更快速的CPU之前,应该先检查消耗CPU资源最多的操作是否能够被优化. 如果发现性能计数器Processor: % Processor Time的值很高,每一个CPU的% Processor Time都超过80%时,可视为出现CPU瓶颈.也可以通过视图sys.dm_os_schedulers监视SQL Server的进程调度(sche

前端性能优化(三)——传统 JavaScript 优化的误区

注:本文是纯技术探讨文,无图无笑点,希望您喜欢 一.前言 软件行业极其缺乏前端人才这是圈内的共识了,某种程度上讲,同等水平前端的工资都要比后端高上不少,而圈内的另一项共识则是--网页是公司的脸面! 几年前,谷歌的一项统计表明,如果亚马逊页面加载每慢 100ms,将影响他们 1% 的收入:如果谷歌页面加载慢 500ms,流量将锐减 20%,这个数据现在必将更加恐怖! 在前端高性能优化(一).(二)中,笔者介绍了一些关于前端优化的技术,这些技术都依赖于前人的辛苦努力,但我们仍要明白的是,前端的情况十

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

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

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来浏览测试

推荐IE前端性能分析神器DynaTrace Ajax Edition

该工具得到了JQuery作者John Resig以及前端性能大牛Steve Souders的推荐,是IE平台上最好的性能分析工具:而且是免费的,当前版本是2.0. 该工具实在过于强大,这里先上两张图,介绍下Timeline功能和Hotspot功能. Timeline如下图,可以列出整个网页打开的瀑布图. Hotspot可以说明IE花在渲染.js解析.js运行.css渲染.cookie等各个动作上的详细性能数据: 刷新评论刷新页面返回顶部 About www.spiga.com.mx Copyri

移动HTML 5前端性能优化指南

  前端工程师的菜!最近移动Html 5越来越火,想有一个体验流畅的Html 5 应用,这篇优化指南就别放过咯.腾讯的同学将关键的注意点与优化方法都总结出来,全文高能干货,非常值得深度学习 >>> 概述 PC优化手段在Mobile侧同样适用 在Mobile侧我们提出三秒种渲染完成首屏指标 基于第二点,首屏加载3秒完成或使用Loading 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB Mobile侧因手机配置原因,除加载外渲染速度也是优化重点 基

5173首页前端性能优化实践

从制定计划,到前后端的开发,最后到测试以及上线,历时4个月,5173首页前端性能优化项目终于顺利上线,并达到了预期的性能优化目标.这次的项目并不是改版,而是原来首页的设计和功能不变,只做重构和优化.虽然项目名叫前端的性能优化,但也并不仅仅是前端单方面的工作,要想彻底的把优化做好,就需要前后端的通力配合. 历史背景 老首页应该是09年上线的,首页也是各部门争夺资源的地方,大家都想在首页有一席之地,各部门在首页都有各自的小豆腐块,如果有新项目的上线,大多是打补丁的方式,并且唯一的规范就是能保证功能正

性能测试知多少---了解前端性能

我的上一篇博文中讲到了响应时间,我们在做性能测试时,能过工具可以屏蔽客户端呈现时间,通过局域网的高宽带可以忽略数 据传输速度的障碍.这并不是说他们不会对系统造成性能影响.相反,从用户的感受来看,虽然传输速度受用户带宽的限制.但我们可以通过很多技术来使用户想要 看到的页面更快的显示.这就web是前端性能. 如果考虑到web应用本身的特性,响应时间的构成应该会更加复杂.  Web应用的基础是超文本传输协议(HTTP)和超文本标记语言(HTML),HTTP协议本身是一种面向非连接的协议,HTML语言则