框架简述

用于前端的性能评测，基于雅虎的评分规则对页面进行评分的Firefox插件，从中可以看出我们页面上的很多不足，并且可以知道我们如何改进和优化，配合将测试报告发送到本地的ShowSlow平台以提供给开发人员随时查看。在Xvfb的辅助下，此框架最大的优点就是可以在无显示设备的环境下稳定运行。

使用环境：
ubuntu-10.10-desktop-i386

工具介绍
Xvfb:  主要就是通过内存计算模拟出图形界面，没有平常所见的操作界面，分为客户端和服务器

YSlow: 当Firefox浏览网页时，可以分析网站的页面（基于Yahoo 14条评分原则），并指出如何进行优化提高网站性能

ShowSlow:收集YSlow的测试结果并显示出来

Ubuntu：开源的Linux桌面操作系统。



LAMP环境安装配置
PHP 安装需要加载mcrypt  mysqli  模块

Apache

sudo apt-get install apache2 -y

PHP5

sudo apt-get install php5 -y
sudo apt-get install libapache2-mod-php5 -y
sudo apt-get install php5-mcrypt
sudo apt-get install php5-curl
sudo /etc/init.d/apache2 restart

Mysql

sudo apt-get install mysql-server -y

安装完成按提示设置root密码

配置Apache、PHP支持Mysql

sudo apt-get install libapache2-mod-auth-mysql

sudo apt-get install php5-mysql

sudo /etc/init.d/apache2 restart

SVN （可选）
sudo apt-get install subversion -y

安装Xvfb
sudo apt-get install xvfb

cd /var/www/
sudo wget http://showslow.googlecode.com/files/showslow_0.13.zip
unzip showslow_0.13.zip
mv showslow_0.13 showslow
cd showslow
cp config.sample.php config.php

vi config.php

根据实际情况修改$db,$user,$pass 根据实际情况修改
# Database connection information
$db = 'showslow';
$user = 'root';
$pass = 'dingtm';
$host = 'localhost';

登录MYSQL 导入数据
mysql -uroot -p
create database showslow;
use showslow;
source /var/www//showslow/tables.sql;
show tables;



创建测试页面列表,添加网址

vi /var/www/showslow/urls.txt

添加网址

http://www.elain.com/
http://wap.elain.com/
http://buy.elain.com/


修改Firefox的application.ini文件最后一段，避免Firefox崩溃后发送报告

    [Crash Reporter]
    Enabled=0

创建一份Firefox测试专用的Profiles (可选)

firefox -profilemanager

修改测试专用的Profiles的prefs.js.
vi /home/elain/.mozilla/firefox/vmdbz1tv.elain/prefs.js

注：不同的服务器vmdbz1tv.elain 这里生成的会不同(随机生成)，此处我选默认目录，也可自建目录，创建prefs.js
# Mozilla User Preferences

# name firefox-prefs.js
# by dingtm
# date 2010-12-05

user_pref("app.update.lastUpdateTime.addon-background-update-timer", 1291608940);
user_pref("app.update.lastUpdateTime.blocklist-background-update-timer", 1291608793);
user_pref("app.update.lastUpdateTime.microsummary-generator-update-timer", 1291608894);
user_pref("app.update.lastUpdateTime.places-maintenance-timer", 1291607239);
user_pref("app.update.lastUpdateTime.search-engine-update-timer", 1291607685);
user_pref("browser.migration.version", 1);
user_pref("browser.places.importBookmarksHTML", false);
user_pref("browser.places.smartBookmarksVersion", 2);
user_pref("browser.startup.homepage_override.mstone", "rv:1.9.2.10");
user_pref("browser.tabs.warnOnClose", false);
user_pref("browser.warnOnRestart", false);
user_pref("distribution.canonical.bookmarksProcessed", true);
user_pref("extensions.PageSpeed.autorun", true);
user_pref("extensions.PageSpeed.beacon.minimal.url", "http://192.168.9.110/showslow/beacon/pagespeed/");
user_pref("extensions.PageSpeed.optimized_file_base_dir", "/tmp");
user_pref("extensions.enabledItems", "langpack-zh-CN@firefox-3.6.ubuntu.com:3.6,ubufox@ubuntu.com:0.9rc2,firebug@software.joehewitt.com:1.6.0,yslow@yahoo-inc.com:2.1.0,{e3f6c2cc-d8db-498c-af6c-499fb211db97}:1.9.2,{972ce4c6-7e08-4474-a285-3208198ce6fd}:3.6.10");
user_pref("extensions.firebug.console.enableSites", true);
user_pref("extensions.firebug.currentVersion", "1.6.0");
user_pref("extensions.firebug.defaultPanelName", "YSlow");
user_pref("extensions.firebug.net.enableSites", true);
user_pref("extensions.firebug.previousPlacement", 1);
user_pref("extensions.firebug.script.enableSites", true);
user_pref("extensions.lastAppVersion", "3.6.10");
user_pref("extensions.update.notifyUser", false);
user_pref("extensions.yslow.autorun", true);
user_pref("extensions.yslow.beaconInfo", "grade");
user_pref("extensions.yslow.beaconUrl", "http://192.168.9.110/showslow/beacon/yslow/");
user_pref("extensions.yslow.cdnHostnames", "www.elain.com,data.elain.com,cdn.elain.com,s.elain.com,wap.elain.com,api.elain.com");
user_pref("extensions.yslow.optinBeacon", true);
user_pref("idle.lastDailyNotification", 1291608859);
user_pref("intl.charsetmenu.browser.cache", "ISO-8859-1, GB2312, UTF-8");
user_pref("network.cookie.prefsMigrated", true);
user_pref("places.last_vacuum", 1291608859);
user_pref("privacy.sanitize.migrateFx3Prefs", true);
user_pref("urlclassifier.keyupdatetime.https://sb-ssl.google.com/safebrowsing/newkey", 1294199157);
user_pref("xpinstall.whitelist.add", "");
user_pref("xpinstall.whitelist.add.36", "");

登陆到服务器的图形界面打开firefox  安装 firebug  yslow pagespeed  设置为自动运行。
 
1、先安装firebug  yslow  pagespeed火狐插件
2、打开Firefox输入：about:config（我保证会很小心的）
3、filter中输入：yslow
修改以下三条数据

extensions.yslow.beaconUrl = http://192.168.9.110/showslow/beacon/yslow/

extensions.yslow.beaconInfo = grade

extensions.yslow.optinBeacon = true

filter中输入：speed

修改这下两条数据：
 extensions.PageSpeed.beacon.minimal.url = http://192.168.9.110/showslow/beacon/pagespeed/
 extensions.PageSpeed.beacon.minimal.enabled = true

新建一个字符串

extensions.yslow.cdnHostnames

添加值：www.elain.com,data.elain.com,cdn.elain.com,s.elain.com,wap.elain.com,api.elain.com


4. 重启Firefox，

注：这里可这用localhost来代替IP,因为服务和测试的同个台服务器上，不同服务器这里一定上设置成为IP地址。

test_harness.pl

这个脚本是用Perl语言写的，我们主要需要用到的是display，profile，source这三个属性（具体作用ReadMe有解释），可以参考下我运行这个脚本的方式：

./test_harness.pl -display=:1 -source http://192.168.9.110/urls.txt -profile /home/elain/.mozilla/firefox/vmdbz1tv.elain/

执行上面的命令，我们通过外部机器访问http://192.168.9.110/showslow/ 即可查看测试结果

monitor.sh

自动调用之前编写test_harness.pl脚本，当我们将调用test_harness的一些参数添加进monitor后使用Linux的Cron就可以实现自动化测试了：）

注意将脚本文件夹的绝对路径赋值给Xvfb_PIDFILE，因为每次执行的时候系统会自动生成一个__xvfb.pid
--source http://192.168.9.110/urls.txt
--profile /root/.mozilla/firefox/vmdbz1tv.elain

创建定时任务

crontab -e

50 04 * * * /bin/sh /home/elain/showslow/monitor2.sh  >> /home/elain/showslow/monitor.log 2>&1

服务端配置完成

客户端配置方法：

注：如果客户端不配置也可这正常查看测试结果，但不可以手动推送数据到服务端上。

配置本地YSlow PageSpeed
 
1、先安装firebug  yslow  pagespeed火狐插件
2、打开Firefox输入：about:config（我保证会很小心的）
3、filter中输入：yslow
修改以下三条数据

extensions.yslow.beaconUrl = http://192.168.9.110/showslow/beacon/yslow/
extensions.yslow.beaconInfo = grade
extensions.yslow.optinBeacon = true

filter中输入：speed

修改这下两条数据：
 extensions.PageSpeed.beacon.minimal.url = http://192.168.9.110/showslow/beacon/pagespeed/
 extensions.PageSpeed.beacon.minimal.enabled = true

新建一个字符串（cdn数据，前端不使用CDN的跳过此步）

extensions.yslow.cdnHostnames

添加值：

www.elain.com,data.elain.com,cdn.elain.com,s.elain.com,wap.elain.com,api.elain.com


4. 重启Firefox，

查看测试报告的URL是：http://192.168.9.110/


排错指南：

1、在运行test_harness.pl脚本时出现的错误
 Can’t locate POE.pm in @INC (@INC contains: /etc/perl /usr/local/lib/perl/5.10.1 /usr/local/share/perl/5.10.1 /usr/lib/perl5 /usr/share/perl5 /usr/lib/perl/5.10 /usr/share/perl/5.10 /usr/local/lib/site_perl .) at test_harness.pl line 100.
    BEGIN failed–compilation aborted at test_harness.pl line 100.

若使用时出现以上错误，解决办法参考如下：

sudo perl -MCPAN -e shell
cpan> install POE


 Can't locate LWP/UserAgent.pm in @INC (@INC contains: /etc/perl /usr/local/lib/perl/5.10.1 /usr/local/share/perl/5.10.1 /usr/lib/perl5 /usr/share/perl5 /usr/lib/perl/5.10 /usr/share/perl/5.10 /usr/local/lib/site_perl .) at test_harness.pl line 100.
若使用时出现以上错误，解决办法参考如下：

sudo perl -MCPAN -e shell
cpan>install Bundle::LWP

如果提示YAML没有安装 (类似于XML的数据描述语言)

cpan>install YAML
cpan> exit


2、注册用户时出现以下错误（此处我怀疑官方的数据库文件中缺失）

Fatal error: Uncaught exception 'Exception' with message 'Can't prepare statement: Unknown column 'points' in 'field list'' in /usr/local/httpd/htdocs/showslow/users/User.php:655 Stack trace: #0 /usr/local/httpd/htdocs/showslow/users/modules/usernamepass/index.php(329): User::getUsersByEmailOrUsername('elain') #1 /usr/local/httpd/htdocs/showslow/users/register.php(47): UsernamePasswordAuthenticationModule->processRegistration(Array, true) #2 {main} thrown in /usr/local/httpd/htdocs/showslow/users/User.php on line 655
说明数据不完整，
用phpmyadmin 建立一个points的表，类型 varchar  字段200

本文出自 “elain的技术博客” 博客，请务必保留此出处http://elain.blog.51cto.com/3339379/613753