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