利用Jenkins+Phantomas进行前端性能自动化测试

前面我们介绍了怎么安装配置ShowSlow和HARViewer,以及Phantomas的使用简介,那怎么将这些工具串起来搭建一个前端自动化测试平台呢?且听我慢慢道来……

这里假设大家都已经正确安装了phantomjs、phantomas、slimerjs、showslow、harviewer和yslow(yslow.js下载地址:http://yslow.org/phantomjs/),这些都是需要用到的工具。

通过yslow进行页面分析并上报到showslow平台进行数据收集。
#phantomjs yslow.js http://www.liveapp.cn/ –info grade[……]

阅读全文>>

HARViewer的搭建

书接上回,在用phantomas进行前端测试时,我们会生成一个HAR文件来存储HTTP客户端/服务器之间的会话信息,我们怎么查看这个日志呢,就是这篇给大家介绍的一个工具——HARViewer。

HAR简介

HAR(HTTP Archive),是一个用来储存HTTP请求/响应信息的通用文件格式,基于JSON。这个格式的出现可以使HTTP监测工具以一种通用的格式导出所收集的数据,这些数据可以被其他支持HAR的HTTP分析工具(包括Firebug,httpwatch,Fiddler等)所使用,来分析网站的性能瓶颈。目前HAR规范最新版本为HAR 1.2。HAR文件必须是UTF-8编码,有无BOM[……]

阅读全文>>

ShowSlow的搭建

前面我们大概讲过怎么利用yslow和phantomas结合showslow进行前端自动化测试,今天来说说具体怎么安装和搭建配置整个平台。

ShowSlow简介

ShowSlow是一个可以帮助监测各种网站性能指标趋势变化的开源工具。通过收集YSlow,Page Speed,WebPageTest和dynaTrace AJAX排名的数据形成图表以帮助了解网站的变化是如何影响其性能的。

ShowSlow的安装和配置

ShowSlow是开源的PHP程序,下载地址:http://www.showslow.org/downloads/,我们选择最新版本showslow_1.2.2。PHP环境的安装[……]

阅读全文>>

前端性能监控平台搭建及应用

前言

为什么要监控性能

“If you cannot measure it, you cannot improve it” ———— William Thomson

这是一个最基本的问题,为什么要关注和监控前端性能?对于公司来说,性能在一定程度上与利益直接相关。国外有很多这方面的调研数据:

性能
收益

Google 延迟 400ms
搜索量下降 0.59%

Bing 延迟 2s
收入下降 4.3%

Yahoo 延迟 400ms
流量下降 5-9%

Mozilla 页面打开减少 2.2s
下载量提升 15.4%

Netflix 开启 Gzip
性能提升 13.25[……]

阅读全文>>