Yslow性能測試架構部署

架構簡述

用于前端的性能評測，基于雅虎的評分規則對頁面進行評分的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

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", "[email protected]:3.6,[email protected]:0.9rc2,[email protected]:1.6.0,[email protected]: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

建立一個字元串（cdn資料，前端不使用CDN的跳過此步）

添加值：

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

檢視測試報告的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.

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