當(dāng)我們知道了web前端性能的關(guān)鍵點(diǎn)后，那么接下來(lái)要做的就是如何去具體實(shí)施并獲取這些關(guān)鍵點(diǎn)的數(shù)據(jù)了。通過(guò)前面的學(xué)習(xí)知道了不少好的工具，經(jīng)過(guò)對(duì)比后個(gè)人覺(jué)得dynatrace還是不錯(cuò)的。 不僅支持ie，ff瀏覽器，還具備js函數(shù)級(jí)別的優(yōu)化分析，它的分析數(shù)據(jù)也是最全面的，分析數(shù)據(jù)可以導(dǎo)出，最后和yslow，pagespeed一樣支持向showslow上面?zhèn)魉徒Y(jié)果信息這樣就節(jié)省了很多的事情了。所以實(shí)施方案具體確定為dynatrace用來(lái)捕獲web前端頁(yè)面訪(fǎng)問(wèn)的性能數(shù)據(jù)，然后上傳至showslow來(lái)瀏覽測(cè)試結(jié)果。 dynatrace安裝與使用 1、下載并安裝dynatrace ajax edition 2、從開(kāi)始--》程序就可以打開(kāi)該工具 3、啟動(dòng)IE后默認(rèn)狀態(tài)是沒(méi)有連接到dynatrace 4、點(diǎn)擊ie上dynatrace插件的最左邊的連接 5、連接成功后會(huì)自動(dòng)刷新當(dāng)前url頁(yè) 6、此時(shí)刷新dynatrace工具界面上的browser節(jié)點(diǎn) 7、載入測(cè)試數(shù)據(jù)成功后就能看到數(shù)據(jù)分析圖表 showslow站點(diǎn)的安裝 showslow是一個(gè)開(kāi)源的php項(xiàng)目，主要用來(lái)展示多個(gè)測(cè)試工具的性能數(shù)據(jù)，比如yslow等。它有一個(gè)線(xiàn)上版的，也支持你下一個(gè)源碼在自己的公司搭建一個(gè)本地版showslow。所以這里我們會(huì)搭建一個(gè)自己私人的showslow站點(diǎn)。 1、下載showslow，并解壓到一個(gè)本地目錄 2、下載搭建showslow站點(diǎn)的其他支撐程序，如web服務(wù)器、php、mysql等 3、下載apache2.2,，nginx也可以，其它的支持php執(zhí)行的web服務(wù)器都行【但是配置可能有點(diǎn)麻煩】 4、下載php程序，最好是5.3的，而且是線(xiàn)程安全的版本【不然有些模塊沒(méi)有，而且安裝時(shí)選擇apache 2.2 x-modle，以及安裝擴(kuò)展插件】 5、下載mysql5.5及以上的，這個(gè)默認(rèn)安裝的選項(xiàng)就可以了 配置各支持程序： 官方說(shuō)明鏈接：http://www.showslow.org/Installation_and_configuration apche配置： 1、先測(cè)試一下默認(rèn)的安裝后是否可以工作 2、修改httpd.conf配置文件 3、去掉以下3個(gè)模塊加載的注釋符號(hào): mod_deflate, mod_rewrite and mod_expires 4、添加一行模塊加載語(yǔ)句LoadModule php5_module "x:/.../php/php5apache2_2.dll" 5、添加以下2種web的請(qǐng)求類(lèi)型頁(yè):【在<IfModule mime_module>標(biāo)簽之間】 AddType application/x-httpd-php .php AddType application/x-httpd-php .phtml 6、在文檔最下方添加一行php配置文件的目錄：PHPIniDir "x:/.../php" 7、修改DocumentRoot的路徑為你解壓showslow的目錄【記住是有兩處，還有一個(gè)在<Directory >標(biāo)簽處】 8、為DirectoryIndex添加一個(gè)默認(rèn)的php瀏覽文件：形如：DirectoryIndex index.php 9、瀏覽以下index.php頁(yè)，如果顯示了php源碼文件內(nèi)容，則上述配置沒(méi)有什么大問(wèn)題 php配置： 1、打開(kāi)php安裝目錄中的配置文件php.ini 　　2、取消以下2個(gè)擴(kuò)展模塊的注釋符號(hào)：php_mysql.dll，php_mysqli.dll
mysql配置： 1、測(cè)試mysql是否安裝正確 2、給showslow創(chuàng)建數(shù)據(jù)庫(kù)

[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、修改該文件的數(shù)據(jù)庫(kù)連接信息，按照上面創(chuàng)建的數(shù)據(jù)庫(kù)名，用戶(hù)名，密碼即可 5、給showslow創(chuàng)建表結(jié)構(gòu)，通過(guò)運(yùn)行showslow解壓主目錄下的dbupgrade.php和users子目錄下dbupgrade.php文件【如果是在linux下可以在主目錄運(yùn)行make命令即可】 ok，現(xiàn)在所有的配置都已經(jīng)完成了，可以再次訪(fǎng)問(wèn)我們配置的網(wǎng)址，是不是已經(jīng)可以正常訪(fǎng)問(wèn)了。 　集成dynatrace和showslow： 2個(gè)程序單獨(dú)的都已經(jīng)安裝完成就可以合作使用了，其實(shí)集成就是在dynatrace主程序界面，或者叫代理界面中進(jìn)行一個(gè)上傳操作即可。 1、點(diǎn)擊查看之前錄制的性能數(shù)據(jù)的概要頁(yè)面 2、在右邊上方窗口中選擇一個(gè)url地址 3、右鍵之，選擇上傳至showslow.com 不過(guò)點(diǎn)過(guò)之后應(yīng)該沒(méi)有起到作用，因?yàn)檫€需要在dynatrace的配置文件添加一些配置： 1、打開(kāi)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/ 第一行為上傳的位置，即數(shù)據(jù)傳輸?shù)侥?#xff1b;其實(shí)是指向了一個(gè)php文件，這個(gè)文件用來(lái)接收發(fā)送過(guò)去的json字符串，并存儲(chǔ)在showslow的數(shù)據(jù)庫(kù)中 第二行為手動(dòng)上傳后提示你打開(kāi)showslow頁(yè)面查看數(shù)據(jù)分析時(shí)的url地址 3、現(xiàn)在再去上傳一次，然后去showslow首頁(yè)刷新一次 集成到自動(dòng)化測(cè)試的環(huán)境中： 讓dynatrace自動(dòng)上傳數(shù)據(jù)： 其實(shí)dynatrace沒(méi)有任何的外部標(biāo)準(zhǔn)接口可以被自動(dòng)化所調(diào)用，但是卻提供了一些簡(jiǎn)單的可配置的選項(xiàng)，比如可以在dtajax.ini文件中配置自動(dòng)上傳， 具體為添加如下行即可： -Dcom.dynatrace.diagnostics.ajax.beacon.autoupload=true 讓自動(dòng)化測(cè)試執(zhí)行時(shí)自動(dòng)捕獲網(wǎng)頁(yè)瀏覽數(shù)據(jù)： 還有一個(gè)可以配置dynatrace的地方就是環(huán)境變量，因?yàn)楫?dāng)瀏覽器安裝了dynatrace的插件后，每次啟動(dòng)插件都會(huì)去檢查特定的環(huán)境變量，若其值等于特定的配置則會(huì) 作為初始化為插件的參數(shù)；而其中就有環(huán)境變量支持作為工具的開(kāi)關(guān)功能，在運(yùn)行自動(dòng)化測(cè)試時(shí)可以通過(guò)控制這些環(huán)境變量的值就可以間接的控制dynatrace了。 因版本不同會(huì)有不同的環(huán)境變量名，具體可以看一下這里。https://apmcommunity.compuware.com/community/display/AJAXFORUM/Automation+with+dynaTrace+AJAX+Edition 其中3.x的環(huán)境變量如下： DT_AE_AGENTACTIVE=true DT_AE_AGENTNAME="any string name" 這樣你啟動(dòng)的每一個(gè)瀏覽器實(shí)例都會(huì)默認(rèn)打開(kāi)dynatrace的代理功能，所以整個(gè)自動(dòng)化的測(cè)試過(guò)程中的所有頁(yè)面訪(fǎng)問(wèn)數(shù)據(jù)都會(huì)被收集，同時(shí)在你測(cè)試完成關(guān)閉瀏覽器之后會(huì) 自動(dòng)發(fā)送所有數(shù)據(jù)到指定的showslow上面，測(cè)試結(jié)束后還可以發(fā)送郵件給相關(guān)人員去showslow上直接查看即可。 相關(guān)文章： web前端性能分析--原理篇? ?

最新內(nèi)容請(qǐng)見(jiàn)作者的GitHub頁(yè)：http://qaseven.github.io/ ? ?

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。