當我們知道了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 apche配置： 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創建數據庫

[sql] view plaincopy $ 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 [sql] view plaincopy $ 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

3、修改showslow解壓目錄下的config.sample.php文件名為config.php 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上直接查看即可。 相關文章： web前端性能分析--原理篇? ?

最新內容請見作者的GitHub頁：http://qaseven.github.io/ ? ?

總結

以上是生活随笔為你收集整理的web前端性能分析--实践篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。