Xvfb+YSlow+ShowSlow搭建前端性能測試框架
工具介紹
- Xvfb: 主要就是通過內存計算模擬出圖形界面，沒有平常所見的操作界面，分為客戶端和服務器
- YSlow: 當Firefox瀏覽網頁時，可以分析網站的頁面（基于Yahoo 14條評分原則），并指出如何進行優化提高網站性能
- ShowSlow:收集YSlow的測試結果并顯示出來
- Ubuntu：開源的Linux系統，界面越來越向Windows靠近
框架簡介
對于前端的童鞋我相信YSlow已經耳熟能詳了，基于雅虎的評分規則對頁面進行評分的Firefox插件，從中我們可以看出我們頁面上的很多不足，并且可以知道我們如何改進和優化，配合將測試報告發送到本地的ShowSlow平臺以提供給開發人員隨時查看。在Xvfb的輔助下，這個框架最大的優點就是可以在無顯示設備的環境下穩定運行！
環境配置
搭建本地ShowSlow測試平臺
這個我之前在Windows Server 2003搭建過，但是這次在Ubuntu下還是有所區別的（所有命令都在終端輸入）
mysql -uroot -p
//創建一個數據庫，名字和第二步你填寫的保持一致
create database ‘DBName‘;
//切換到新建的數據庫
use ‘DBName’;
//將ShowSlow文件夾的tables.sql（數據庫表）導入到新建的數據庫中，注意無分號
source /var/www/showslow/tables.sql
//查看下是否導入成功了，貌似有個表名叫ShowSlow2，汗
show tables;
- sudo mkdir /var/www/showslow (建立一個空文件夾)
- sudo svn checkout http://showslow.googlecode.com/svn/trunk//var/www/showslow(將ShowSlow的源代碼下載到本地，這一步會報錯連接不上http://svn.facebook.com，首先要感謝國家，其次要感謝功夫網，最后我要說的是無視…)
- sudo mv config.sample.php config.php (修改文件夾名)
- sudo gedit config.php
- 根據實際情況修改$db,$user,$pass可以根據實際情況修改
- 按照上一步修改的數據創建相應的Mysql數據庫
自動化腳本
這個是我們這個框架最重要的部分，具體請參考Sergey Chernyshev的博客以及自動化腳本作者Aaron Kulick ，現在最新的Showslow的子文件夾automation有三個文件——monitor.sh (配置文件) test_harness.pl （自動化腳本） ReadMe（框架說明文件，強烈推薦各位童鞋仔細閱讀，因為這關系到后面腳本的修改問題）
Xvfb
sudo apt-get install xvfb
Xvfb :1 -screen 0 1152×864x24 +extension RANDR
removing from list!
通過Google大神的幫助，解決辦法很簡單，安裝這個需要的字體——
sudo apt-get install xfonts-cyrillic
創建一份測試頁面列表
sudo gedit /var/www/URLs （在Apache下新建一個URLs列表，注意每一個鏈接為單獨的一行)
創建一份Firefox測試專用的Profiles
/usr/lib/firefox-3.6.3/firefox-profilemanager
首先我們要修改Firefox的application.ini文件最后一段，避免Firefox崩潰后發送報告
Enabled=0
其次就是修改測試專用的Profiles的prefs.js，這個很關鍵，要設置一些Firefox屬性才能讓測試更好的進行下去，ShowSlow的論壇有推薦配置，（猛擊這里）
## PREFS.JS RECOMMENDATIONS (AUTOMATION)
#do not let automated firefox manipulate the profile extensions (auto
update)
user_pref(“extensions.update.enabled”, false);
user_pref(“extensions.update.notifyUser”, false);
#disable session restore on crash (do not want stale/old tabs)
user_pref(“browser.sessionstore.resume_from_crash”, false);
#do not let javascript resize the window
user_pref(“dom.disable_window_move_resize”, true);
#do not let javascript manipulate context menus (automation)
user_pref(“pref.advanced.javascript.disable_button.advanced”, false);
#do not show me pop-up block messages (screenshot related)
user_pref(“privacy.popups.showBrowserMessage”, false);
#do not warn for weak SSL or mixed SSL/HTTP content:
user_pref(“security.warn_entering_weak”, false);
user_pref(“security.warn_viewing_mixed”, false);
#firebug prefs
user_pref(“extensions.firebug.allPagesActivation”,“on”);
user_pref(“extensions.firebug.net.enableSites”, true);
user_pref(“extensions.firebug.defaultPanelName”,“YSlow”);
user_pref(“extensions.firebug.previousPlacement”, 1);
#yslow prefs
user_pref(“extensions.yslow.autorun”, true);
user_pref(“extensions.yslow.beaconInfo”,“grade”);
user_pref(“extensions.yslow.beaconUrl”,“http://localhost/showslow/beacon/yslow/“);
user_pref(“extensions.yslow.optinBeacon”, true);
配置本地YSlow
如果測試和服務器不在同一機器上，請將localhost改成實際地址
extensions.yslow.beaconInfo = grade
extensions.yslow.optinBeacon = true
- 打開Firefox輸入：about:config（我保證會很小心的）
- filter中輸入：yslow
- 修改以下三條數據
- 重啟Firefox，have fun
還等什么？開始你的測試之旅吧，查看測試報告的URL是：http://localhost/showslow/
在這個地方遇到了一個問題就是所有配置都是正確的情況下，ShowSlow依然接收不到YSlow發送的測試數據，后來在RedHat的服務器上搭建環境同樣遇到了這個問題，經過SA白非童鞋的幫助查看Apache的報錯日志（/var/log/apache2/error.log）發現罪魁禍首是腳本中需要的幾個模塊必須是PHP5.2以上的版本，遂升級PHP至最新版本可解決問題。
test_harness.pl
這個腳本是用Perl語言寫的，我也是剛接觸這個語言，但是我還是推薦各位童鞋看看他的文件結構，老外寫的代碼閱讀起來還是比較舒服，附帶著大量注釋方便我這樣的小白也能輕松理解每個函數的意義。我們主要需要用到的是display，profile，source這三個屬性（具體作用ReadMe有解釋），可以參考下我運行這個腳本的方式：
perl test_harness.pl -display=:1 -source http://localhost/URLs -profile /home/eric/FFProfiles
/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.
這個問題糾結了我好幾天，百思不得其解，關鍵還是我第一次使用Linux和Perl，
對于很多報錯信息都可以熟視無睹（請鄙視我），最后請教了Sergey童鞋，
才恍然大悟原來是沒有安裝POE（請再次鄙視我），解決辦法參考如下：
sudo perl -MCPAN -e shell （sudo很關鍵啊，內牛滿面）
cpan> install POE
如果提示YAML沒有安裝(類似于XML的數據描述語言)
cpan>install YAML
cpan> exit
這個時候自動化腳本已經開始運行了，我們可以通過外部機器訪問虛擬機搭建的ShowSlow查看測試結果(Ubuntu使用ifconfig查看本機IP地址，注意虛擬機網卡要設置成Bridged方式)
monitor.sh
自動調用之前編寫test_harness.pl腳本，當我們將調用test_harness的一些參數添加進monitor后使用Linux的Cron就可以實現自動化測試了
注意將腳本文件夾的絕對路徑賦值給Xvfb_PIDFILE，因為每次執行的時候系統會自動生成一個__xvfb.pid
在Ubuntu和RedHat環境搭建下的Showslow平臺點擊測試URL進入Detail Page發現“Measurements over time”和“YSlow measurements history”兩個區域的圖形繪制不出，自己找了很久一直沒有頭緒，只好求助于ShowSlow的作者Sergey…
1 確保config.php文件中的$showslow_base=http://localhost/showslow/
2 查看phpinfo()確保Apache的模塊mod_rewrite加載并啟用了
sudo a2enmod rewrite ;
2 change all of ”AllowOverride none” to “AllowOverride All”
sudo vim /etc/apache2/sites-enabled/000-default ;
3 Restart apache2
sudo /etc/init.d/apache2 restart;
刷新一下頁面圖形是不是回來了。
在實際工作中我們還遇到了一個不大不小的問題就是有些頁面需要登錄才能訪問，而我們的測試環境又是全自動化的，所以在這里需要用到Firefox的一個插件叫做Greasemonkey，可以執行JS腳本，這樣只需要我們編寫一個自動登錄的小JS腳本，然后在Greasemonkey中設置那幾個URL需要使用這個腳本，這樣每次訪問需要登錄的界面就會自動登錄了。
留言列表
