Yslow效能測試框架部署

科技小能手發表於2017-11-12
框架
框架簡述

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


相關文章