1.背景
應(yīng)用的性能測(cè)試與優(yōu)化目前主要停留在服務(wù)器端的反饋，而對(duì)于前端性能標(biāo)準(zhǔn)的研究與測(cè)試相對(duì)比較空白，缺乏統(tǒng)一的標(biāo)準(zhǔn)與工具。眾所周知，瀏覽器html組件的下載及渲染性能直接影響最終的用戶體驗(yàn)，目前應(yīng)用的前端性能有許多優(yōu)化空間，因此對(duì)前端性能進(jìn)行測(cè)試與監(jiān)控，有利于提升客戶體驗(yàn)，做到全方位的性能監(jiān)控，實(shí)現(xiàn)“客戶第一”的價(jià)值。
2.前端性能標(biāo)準(zhǔn)
目前較為流行且免費(fèi)的前端性能評(píng)測(cè)標(biāo)準(zhǔn)及工具，是以yahoo的yslow及google的pagespeed為主。yslow和page speed是兩款firefox瀏覽器下功能類似的插件，其主要功能是在用戶訪問網(wǎng)頁時(shí)，可用此插件對(duì)當(dāng)前訪問的網(wǎng)頁按若干條固定的評(píng)分標(biāo)準(zhǔn)進(jìn)行前端性能評(píng)分。另有dynatrace也提供與yslow和page speed類似的評(píng)價(jià)標(biāo)準(zhǔn)。
2.1 yslow
評(píng)分標(biāo)準(zhǔn)：主要有35條評(píng)分標(biāo)準(zhǔn)，具體標(biāo)準(zhǔn)參見官方文檔http://developer.yahoo.com/performance/rules.html。
插件下載：http://developer.yahoo.com/yslow/
插件運(yùn)行：插件運(yùn)行后，在firefox中訪問網(wǎng)頁，插件將會(huì)顯示對(duì)該網(wǎng)頁的評(píng)分，15個(gè)標(biāo)準(zhǔn)（使用到的評(píng)分標(biāo)準(zhǔn)數(shù)在不同版本的yslow插件中有所不同）從A-F進(jìn)行打分。下圖是對(duì)阿里巴巴中文網(wǎng)站首頁的一個(gè)打分情況：
2.2 page speed
評(píng)分標(biāo)準(zhǔn)：pagespeed主要的評(píng)標(biāo)準(zhǔn)有29條http://code.google.com/speed/page-speed/docs/rules_intro.html
插件下載：http://code.google.com/speed/page-speed/download.html
插件運(yùn)行：pagespeed除了支持firefox外，還支持google chrome瀏覽器，下圖是在firefox中用page speed評(píng)估http://www.1688.com的結(jié)果
2.3 dynatrace ajax edition
評(píng)分標(biāo)準(zhǔn)：評(píng)分標(biāo)準(zhǔn)分為四個(gè)大類，包括Cache、網(wǎng)絡(luò)、Server端、JavaScript代碼，每個(gè)大類都有A~F六個(gè)等級(jí)，各個(gè)大類下面的最佳實(shí)踐細(xì)則與yslow及page speed類似http://community.dynatrace.com/ext/ajax/PUB/Best+Practices+on+Web+Site+Performance+Optimization。
下載安裝：https://www.dynatrace.com
運(yùn)行情況：dynatrace可以支持firefox和ie，且其可支持到函數(shù)級(jí)的度量分析，在windows下運(yùn)行dynatrace如下圖所示
3.方案選擇
3.1dynaTrace Ajax Edition
dynaTrace Ajax Edition是一款免費(fèi)的前端性能評(píng)測(cè)工具，與非常優(yōu)秀的yslow及page speed相比，其仍有幾個(gè)不容忽視的優(yōu)點(diǎn)：
1)支持IE瀏覽器，這個(gè)優(yōu)點(diǎn)直接秒殺另外兩個(gè)工具
2)支持JS函數(shù)級(jí)的性能分析
3)對(duì)每條細(xì)則的建議更加詳細(xì)具體
3.2showslow
showslow是yslow的數(shù)據(jù)收集與展示平臺(tái)http://www.showslow.com/，它是一個(gè)開源的php項(xiàng)目，可以用來與firefox的yslow插件、page speed插件或者dynatrace通信，收集插件或程序所發(fā)送過來的信息并集中展示。只需要在dynatrace安裝目錄下進(jìn)行一些設(shè)置，即可自動(dòng)實(shí)現(xiàn)上傳結(jié)果到showslow平臺(tái)作為存檔、分析及監(jiān)控。
4.環(huán)境搭建與工具使用
4.1dynatraceAjax Edition
4.1.1 安裝運(yùn)行
從dynatrace官網(wǎng)http://ajax.dynatrace.com下載安裝最新版本的dynatraceAjax Edition即可。dynatrace的啟動(dòng)可直接從菜單欄中進(jìn)行運(yùn)行，也可在IE插件欄中點(diǎn)擊按鈕運(yùn)行。
4.1.2上傳結(jié)果至showslow
對(duì)相應(yīng)的鏈接右擊，就可將相應(yīng)結(jié)果上傳到showslow
4.1.3 showslow中查看結(jié)果
showslow中看到的結(jié)果頁面如下圖所示：
4.2showslow環(huán)境搭建
1. 如是Linux平臺(tái)，需要預(yù)先安裝如下軟件：libmcrypt-2.5.8，ncurses-5.7.tar.gz，zlib-1.2.3（要用64位方式編譯http://blog.sina.com.cn/s/blog_5f66526e0100gkzu.html）。
2.安裝mysql，要求mysql5以上版本。
3.安裝Apache，最好安裝2.0以上版本。
4.安裝php，要求php5.2以上版本。
在Linux平臺(tái)上搭建apache+php+mysql的文檔網(wǎng)上有很多，大家可參閱，我在安裝過程中遇到的問題，在文檔最后有一個(gè)環(huán)境問題總結(jié)，可能會(huì)對(duì)大家有幫助。搭建完成基本的mysql+apache+php之后，再用如下的步驟可搭建showslow環(huán)境http://www.showslow.org/Installation_and_configuration：
第一步，下載showslow
下載showslow：https://github.com/sergeychernyshev/showslow/downloads
第二步，解壓
解壓showslow至某一文件夾，如：/www/showslow
第三步，設(shè)置apache
將showslow文件設(shè)置為apache的DocumentRoot，修改或添加httpd.conf文件內(nèi)容如下：
<VirtualHost *:80>
DocumentRoot/www/showslow #目錄主路徑,必須有這個(gè)目錄才寫
DirectoryIndexindex.htm index.html index.jsp index.php default.html defautl.htm default.jsp
ErrorLoglogs/market-error_log
CustomLoglogs/market-access_log common
</VirtualHost> |
第四步，新建數(shù)據(jù)庫
在mysql中新建一個(gè)數(shù)據(jù)庫showslow，授所有權(quán)限給showslowuser用戶：
mysql> createdatabase showslow;
mysql> grant all onshowslow.* to showslowuser identified by 'showslow';
并在showslow文件夾下的config.sample.php文件中進(jìn)行如下所示的數(shù)據(jù)庫參數(shù)的修改，修改完成后另存為config.php:
$db = 'showslow';
$user = 'showslowuser';
$pass = 'showslow';
$host = '10.20.155.4'; |
第五步，更新數(shù)據(jù)庫
綁定showslow到我們臺(tái)式機(jī)的hosts文件里，方便訪問(也可以直接ip訪問)：
10.20.155.4 www.myshowslow.com
啟動(dòng)Apache，可在http://www.myshowslow.com看到showslow平臺(tái)，報(bào)錯(cuò)是因數(shù)據(jù)庫未更新，訪問http://www.myshowslow.com/dbupgrade.php和http://www.myshowslow.com/users/dbupgrade.php將數(shù)據(jù)庫中的表更新至與當(dāng)前版本showslow一致。
第六步，設(shè)置dynatrace
dynatrace安裝文件下的dtajax.ini文件增加如下三行，其中第三行可設(shè)置dynatrace自動(dòng)上傳結(jié)果至showslow：
-Dcom.dynatrace.diagnostics.ajax.beacon.uploadurl=http:// 10.20.155.4:8070/beacon/dynatrace
-Dcom.dynatrace.diagnostics.ajax.beacon.portalurl=http:// 10.20.155.4:8070/
-Dcom.dynatrace.diagnostics.ajax.beacon.autoupload=true |
第七步，大功造成，上傳并顯示結(jié)果
按4.1節(jié)中的上傳結(jié)果至showslow.com即可將前端性能分析結(jié)果上傳至shlowslow。
4.3 dynatrace+showslow與UI自動(dòng)化結(jié)合
只需要在ruby語言所寫的自動(dòng)化腳本中加入如下兩行，即可在運(yùn)行UI自動(dòng)化腳本時(shí)，把UI自動(dòng)化所訪問到的頁面的前端性能數(shù)據(jù)，通過所安裝的dynatrace自動(dòng)上傳至showslow平臺(tái)。
ENV['DT_IE_AGENT_ACTIVE'] = 'true'
ENV['DT_IE_SESSION_NAME'] = 'Watir Sample Test'
一個(gè)完整的示例代碼也只需要8行：
require 'pwatir'
ENV['DT_IE_AGENT_ACTIVE'] = 'true'
ENV['DT_IE_SESSION_NAME'] = 'Watir Sample Test'
b = Watir::IE.new
b.goto('http://www.baidu.com')
b.text_field(:id, 'kw').set 'watir'
b.button(:id, "su").click
b.close() |
4.4 Linux中安裝mysql+apache+php問題小結(jié)
4.4.1Can't connect to local MySQL server through socket‘xxx’
安裝mysql后，運(yùn)行mysql命令會(huì)出現(xiàn)ERROR 2002(HY000): Can't connect to local MySQL server through socket ‘xxx’錯(cuò)誤，通常是由于安裝完成mysql之后未啟動(dòng)造成的，執(zhí)行/etc/init.d/mysqlstart即可。
mysql安裝好之后，默認(rèn)的root密碼是空，mysql –uroot –p后在密碼輸入行直接回國即可命令模式以root進(jìn)入mysql。
4.4.2 安裝php時(shí)configure及make時(shí)報(bào)錯(cuò)的問題
從源碼安裝php時(shí)，要運(yùn)行如下的編譯項(xiàng)：
./configure --prefix=/usr/local/php5--with-charset=utf8 --with-extra-charsets=gbk,gb2312,utf8 --with-apxs2=/usr/local/httpd/bin/apxs--with-config-file-path=/usr/local/lib/php --with-mysql=/data/mysql--enable-mbstring --with-mysqli=/data/mysql/bin/mysql_config--with-mcrypt=/usr/local/libmcrypt
因此需要安裝apache，mysql，mcrypt等軟件之后，才能安裝php。
4.4.3 php安裝過程中httpd.conf相關(guān)的配置修改
在從源碼安裝php過程中，運(yùn)行make命令后將php源代碼目錄modules下的libphp5.so拷貝至httpd/modules下，并在httpd.conf中加載這個(gè)module并添加兩種文件類型：
LoadModule php5_module modules/libphp5.so
AddType application/x-httpd-php .php
AddType application/x-httpd-php .html
安裝完成php后，需要將php源代碼目錄下的php.ini-dist拷貝至--with-config-file-path指定的/usr/local/lib/php目錄下并改名為php.ini，同時(shí)在httpd.conf文件中指定php.ini文件位置：
PHPIniDir "/usr/local/lib/php"