使用dynatrace+showslow進行前端性能測試

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"