當我們知道了web前端性能的關鍵點後，那麼接下來要做的就是如何去具體實施並獲取這些關鍵點的數據了。通過前面的學習知道了不少好的工具，經過對比後個人覺得dynatrace還是不錯的。
不僅支持ie，ff瀏覽器，還具備js函數級別的優化分析，它的分析數據也是最全面的，分析數據可以導出，最後和yslow，pagespeed一樣支持向showslow上面傳送結果信息這樣就節省了很多的事情了。所以實施方案具體確定爲dynatrace用來捕獲web前端頁面訪問的性能數據，然後上傳至showslow來瀏覽測試結果。
dynatrace安裝與使用
1、下載並安裝dynatrace ajax edition
2、從開始--》程序就可以打開該工具
3、啓動IE後默認狀態是沒有連接到dynatrace
4、點擊ie上dynatrace插件的最左邊的連接
5、連接成功後會自動刷新當前url頁
6、此時刷新dynatrace工具界面上的browser節點
7、載入測試數據成功後就能看到數據分析圖表
showslow站點的安裝
showslow是一個開源的php項目，主要用來展示多個測試工具的性能數據，比如yslow等。它有一個線上版的，也支持你下一個源碼在自己的公司搭建一個本地版showslow。所以這裏我們會搭建一個自己私人的showslow站點。
1、下載showslow，並解壓到一個本地目錄
2、下載搭建showslow站點的其他支撐程序，如web服務器、php、mysql等
3、下載apache2.2,，nginx也可以，其它的支持php執行的web服務器都行【但是配置可能有點麻煩】
4、下載php程序，最好是5.3的，而且是線程安全的版本【不然有些模塊沒有，而且安裝時選擇apache 2.2 x-modle，以及安裝擴展插件】
5、下載mysql5.5及以上的，這個默認安裝的選項就可以了
配置各支持程序：
官方說明鏈接：http://www.showslow.org/Installation_and_configuration
1、先測試一下默認的安裝後是否可以工作
2、修改httpd.conf配置文件
3、去掉以下3個模塊加載的註釋符號: mod_deflate, mod_rewrite and mod_expires
4、添加一行模塊加載語句LoadModule php5_module "x:/.../php/php5apache2_2.dll"
5、添加以下2種web的請求類型頁:【在<IfModule mime_module>標籤之間】
AddType application/x-httpd-php .php
AddType application/x-httpd-php .phtml
6、在文檔最下方添加一行php配置文件的目錄：PHPIniDir "x:/.../php"
7、修改DocumentRoot的路徑爲你解壓showslow的目錄【記住是有兩處，還有一個在<Directory >標籤處】
8、爲DirectoryIndex添加一個默認的php瀏覽文件：形如：DirectoryIndex index.php
9、瀏覽以下index.php頁，如果顯示了php源碼文件內容，則上述配置沒有什麼大問題
php配置：
1、打開php安裝目錄中的配置文件php.ini
2、取消以下2個擴展模塊的註釋符號：php_mysql.dll，php_mysqli.dll
mysql配置：
1、測試mysql是否安裝正確
2、給showslow創建數據庫
- $ mysql -u root -p
- mysql> create database showslow;
- mysql> grant usage on showslow.* to showslowuser@localhost identified by '... database-password ...';
- mysql> grant all privileges on showslow.* to showslowuser@localhost;
- mysql> quit
4、修改該文件的數據庫連接信息，按照上面創建的數據庫名，用戶名，密碼即可
5、給showslow創建表結構，通過運行showslow解壓主目錄下的dbupgrade.php和users子目錄下dbupgrade.php文件【如果是在linux下可以在主目錄運行make命令即可】
ok，現在所有的配置都已經完成了，可以再次訪問我們配置的網址，是不是已經可以正常訪問了。
集成dynatrace和showslow：
2個程序單獨的都已經安裝完成就可以合作使用了，其實集成就是在dynatrace主程序界面，或者叫代理界面中進行一個上傳操作即可。
1、點擊查看之前錄製的性能數據的概要頁面
2、在右邊上方窗口中選擇一個url地址
3、右鍵之，選擇上傳至showslow.com
不過點過之後應該沒有起到作用，因爲還需要在dynatrace的配置文件添加一些配置：
1、打開dynatrace的配置文件dtajax.ini，在安裝目錄
2、添加如下配置行
-Dcom.dynatrace.diagnostics.ajax.beacon.uploadurl=http://www.showslow.com/beacon/dynatrace
-Dcom.dynatrace.diagnostics.ajax.beacon.portalurl=http://www.showslow.com/
第一行爲上傳的位置，即數據傳輸到哪；其實是指向了一個php文件，這個文件用來接收發送過去的json字符串，並存儲在showslow的數據庫中
第二行爲手動上傳後提示你打開showslow頁面查看數據分析時的url地址
3、現在再去上傳一次，然後去showslow首頁刷新一次
集成到自動化測試的環境中：
讓dynatrace自動上傳數據：
其實dynatrace沒有任何的外部標準接口可以被自動化所調用，但是卻提供了一些簡單的可配置的選項，比如可以在dtajax.ini文件中配置自動上傳，具體爲添加如下行即可：
-Dcom.dynatrace.diagnostics.ajax.beacon.autoupload=true
還有一個可以配置dynatrace的地方就是環境變量，因爲當瀏覽器安裝了dynatrace的插件後，每次啓動插件都會去檢查特定的環境變量，若其值等於特定的配置則會
作爲初始化爲插件的參數；而其中就有環境變量支持作爲工具的開關功能，在運行自動化測試時可以通過控制這些環境變量的值就可以間接的控制dynatrace了。
因版本不同會有不同的環境變量名，具體可以看一下這裏。https://apmcommunity.compuware.com/community/display/AJAXFORUM/Automation+with+dynaTrace+AJAX+Edition
其中3.x的環境變量如下：
DT_AE_AGENTACTIVE=true
DT_AE_AGENTNAME="any string name"
這樣你啓動的每一個瀏覽器實例都會默認打開dynatrace的代理功能，所以整個自動化的測試過程中的所有頁面訪問數據都會被收集，同時在你測試完成關閉瀏覽器之後會
自動發送所有數據到指定的showslow上面，測試結束後還可以發送郵件給相關人員去showslow上直接查看即可。
PS：
關於showslow的使用和分析可以看這邊文章：
http://blog.dynatrace.com/2009/11/17/a-step-by-step-guide-to-dynatrace-ajax-edition-available-today-for-public-download/
如何集成到自動化可以看這些文章：
http://blog.dynatrace.com/2009/11/04/5-steps-to-automate-browser-performance-analysis-with-watir-and-dynatrace-ajax-edition/
http://blog.dynatrace.com/2010/05/21/how-to-use-your-selenium-tests-for-automated-javascriptajax-performance-analysis/
http://blog.dynatrace.com/2011/01/05/5-steps-to-setup-showslow-as-web-performance-repository-for-dynatrace-data/
最後有其他問題可以去它的社區去問，去它的博客去搜，所有的聯繫方式在dynatrace的默認主界面上都有提示
