Xvfb+YSlow+ShowSlow搭建前端性能測試框架

　　工具介紹

　　Xvfb: 主要就是通過內存計算模擬出圖形界面，沒有平常所見的操作界面，分為客戶端和服務器

　　YSlow: 當Firefox瀏覽網頁時，可以分析網站的頁面(基于Yahoo 14條評分原則)，并指出如何進行優化提高網站性能

　　ShowSlow:收集YSlow的測試結果并顯示出來

　　Ubuntu：開源的Linux系統，界面越來越向Windows靠近

　　框架簡介

　　對于前端的童鞋我相信YSlow已經耳熟能詳了，基于雅虎的評分規則對頁面進行評分的Firefox插件，從中我們可以看出我們頁面上的很多不足，并且可以知道我們如何改進和優化，配合將測試報告發送到本地的ShowSlow平臺以提供給開發人員隨時查看。在Xvfb的輔助下，這個框架最大的優點就是可以在無顯示設備的環境下穩定運行!

　　環境配置

　　典型的LAMP配置，網上資料很多，當然你也可以點此圍觀

　　搭建本地ShowSlow測試平臺

　　這個我之前在Windows Server 2003搭建過(點此圍觀)，但是這次在Ubuntu下還是有所區別的(所有命令都在終端輸入)

　　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數據庫

　　//以root用戶權限進入mysql

　　mysql -uroot -p

　　//創建一個數據庫，名字和第二步你填寫的保持一致

　　create database ‘DBName‘;

　　//切換到新建的數據庫

　　use ‘DBName’;

　　// 將ShowSlow文件夾的tables.sql(數據庫表)導入到新建的數據庫中，注意無分號

　　source /var/www/showslow/tables.sql

　　//查看下是否導入成功了，貌似有個表名叫ShowSlow2，汗

　　show tables;

　　自動化腳本

　　這個是我們這個框架最重要的部分，具體請參考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

　　我在此處發現報錯：[dix] Could not init font path element /usr/share/fonts/X11/cyrillic, 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崩潰后發送報告

　　[Crash Reporter]

　　Enabled=0

　　其次就是修改測試專用的Profiles的prefs.js，這個很關鍵，要設置一些Firefox屬性才能讓測試更好的進行下去，ShowSlow的論壇有推薦配置，(猛擊這里)

　　gedit /home/eric/FFProfiles/prefs.js

　　## 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

原文轉自：http://blogread.cn/it/article/2005?f=sa