框架简述
用于前端的性能评测，基于雅虎的评分规则对页面进行评分的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
说明数据不完整，
用于前端的性能评测，基于雅虎的评分规则对页面进行评分的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
本文转自 elain2012 51CTO博客，原文链接:http://blog.51cto.com/elain/613753
