dynaTrace Ajax內(nèi)測(cè)版發(fā)布已有兩周了。它給你的第一印象是什么。那段時(shí)間內(nèi)我們收到的所有反饋意見（例如來(lái)自Steve Souders的意見，以及來(lái)自所有其他聯(lián)系形式和在線論壇的意見）使這款工具從它的早期版本過(guò)渡到它的第一個(gè)“官方”發(fā)布版成為可能。
在這篇博客里，我將就dynaTrace Labs為什么要構(gòu)建Ajax版工具展開討論，它解決了什么問(wèn)題，以及如何在一個(gè)關(guān)于Google Maps的例子中使用它。
為什么要開發(fā)dynaTrace Ajax版——為什么免費(fèi)？
在dynaTrace網(wǎng)站，我們看到我們的客戶跟業(yè)界一樣，將以瀏覽器和運(yùn)行時(shí)（Javascript、DOM）為基礎(chǔ)的Web應(yīng)用作為其應(yīng)用平臺(tái)。那些新興的框架，像jQuery、GWT、YUI、Dojo等，讓構(gòu)建web 2.0應(yīng)用越顯輕松——但是，也越來(lái)越難以確認(rèn)應(yīng)用中的問(wèn)題到底是功能性的，還是與性能相關(guān)的。
即便是在企業(yè)環(huán)境中，排名第一的仍然是IE瀏覽器。IE的診斷工具在涉及問(wèn)題分析時(shí)，常會(huì)給開發(fā)和測(cè)試人員帶來(lái)痛苦。在Web2.0/Ajax應(yīng)用中所面對(duì)的挑戰(zhàn)不僅是要了解網(wǎng)絡(luò)交互（有多少資源以及什么時(shí)候載入），而且要了解這些交互是如何影響性能的。該問(wèn)題所涉及的領(lǐng)域已經(jīng)延伸到JavaScript、XmlHttpRequests、DOM操作、框架、布局和渲染。dynaTrace Ajax版的來(lái)臨即可解決這類問(wèn)題，以幫助用戶了解是什么原因?qū)е卢F(xiàn)代Ajax應(yīng)用中出現(xiàn)性能和功能問(wèn)題。
那么，為什么免費(fèi)呢？免費(fèi)是因?yàn)槲覀兿霂椭_發(fā)和測(cè)試人員通過(guò)使用這款工具來(lái)解決web 2.0帶來(lái)的各種挑戰(zhàn)。我們也希望推廣dynaTrace APM解決方案理念，即結(jié)合Ajax版所帶來(lái)的端到端的瀏覽器到服務(wù)器的以事務(wù)為中心的應(yīng)用性能管理解決方案。在這里可以繼續(xù)閱讀完整的關(guān)于軟件免費(fèi)的原因說(shuō)明。
動(dòng)手分析Google Maps——從安裝到分析的學(xué)習(xí)指南
我已經(jīng)導(dǎo)出了學(xué)習(xí)這篇博文所需要的dynaTrace Ajax的session文件，點(diǎn)擊這里免費(fèi)下載，然后用它跟著我對(duì)我收集的這些數(shù)據(jù)進(jìn)行逐步分析。如果你已經(jīng)安裝了dynaTrace Ajax版軟件，就解壓縮這個(gè)zip文件，點(diǎn)擊工具欄中的導(dǎo)入按鈕導(dǎo)入session文件（.dtas），然后跳過(guò)前三步。
第一步：下載并安裝dynaTrace Ajax版
最一開始就是——對(duì)了，下載并安裝。
打開瀏覽器，進(jìn)入dynaTrace Ajax版網(wǎng)站，點(diǎn)擊Download按鈕下載最新版本。你必須先注冊(cè)一個(gè)賬戶，這個(gè)賬戶不僅可以讓你下載該工具，還能給你在社區(qū)網(wǎng)站開通權(quán)限，在那里你可以獲得資訊、咨詢問(wèn)題，甚至為軟件期望的功能提供建議。
第二步：?jiǎn)?dòng)并查看dynaTrace Ajax版
點(diǎn)擊開始->所有程序->dynaTrace->dynaTrace AJAX Edition啟動(dòng)dynaTrace。客戶端將出現(xiàn)Cockpit面板（譯者注：左側(cè)）及歡迎界面（譯者注：右側(cè)）。在我們開始追蹤Google Maps之前，讓我們先來(lái)瀏覽一下一些數(shù)據(jù)收集選項(xiàng)：
開始分析之前運(yùn)行配置和預(yù)置功能
dynaTrace使用被稱為運(yùn)行配置的方式，使你可以直接瀏覽你要分析的網(wǎng)站而不用每次都要在你的瀏覽器里鍵入url。你可以通過(guò)左上角工具欄中的下拉菜單來(lái)管理你的運(yùn)行配置（添加新的、修改或者刪除現(xiàn)有的配置）。選擇Manage Run Configuration來(lái)預(yù)置http：//www.google.com網(wǎng)站，參看下面的截圖：
管理網(wǎng)址
如截圖所示，也可以讓dynaTrace在開始追蹤網(wǎng)站之前情空瀏覽器緩存。這一功能在你要測(cè)試你的網(wǎng)站在沒(méi)有緩存的情況下運(yùn)行的怎么樣時(shí)非常有用。另外一件重要的事是通過(guò)點(diǎn)擊工具欄最右側(cè)的按鈕可以啟動(dòng)Preference（預(yù)置）對(duì)話框。
在Preference對(duì)話框中啟用捕捉參數(shù)
你可以在這里指定多個(gè)不同的配置。值得注意的是那個(gè)開啟/關(guān)閉捕捉JavaScript和DOM方法調(diào)用的選項(xiàng)，以及開啟/關(guān)閉Javascript一般追蹤的選項(xiàng)。在下面的練習(xí)里，請(qǐng)勾選“Capture arguments”以及“Capture full JavaScript call trace”選項(xiàng)。
第三步：開始分析Google Maps
讓我們開始吧。你既可以通過(guò)選擇工具欄中的Google運(yùn)行配置，或者點(diǎn)擊歡迎界面的“Start Tracing”，再或者直接按F4快捷鍵來(lái)啟動(dòng)軟件。接下來(lái)，dynaTrace將啟動(dòng)一個(gè)IE的新窗口。如果你選擇了清除瀏覽器緩存，dynaTrace將在打開http://www.google.com之前開始執(zhí)行這個(gè)操作（這可能會(huì)占用幾秒鐘的時(shí)間）。你可以通過(guò)瀏覽器程序圖標(biāo)是否改變來(lái)判斷dynaTrace此時(shí)是否正在追蹤頁(yè)面執(zhí)行過(guò)程——你會(huì)在瀏覽器窗口的左上角看到一個(gè)小dynaTrace圖標(biāo)，以及一個(gè)dynaTrace工具欄顯示“已連接”：
通過(guò)dynaTrace啟動(dòng)瀏覽器
如果你沒(méi)有看到這種情況出現(xiàn)，請(qǐng)到論壇的General Usage Question（譯者注：常見使用問(wèn)題）版塊查詢故障排除技巧，或者通過(guò)在線反饋或論壇聯(lián)系我們。接下來(lái)，請(qǐng)跟我完成這些步驟：
在搜索框里一字一頓的鍵入“dynaTrace”——每次輸入，你都會(huì)看到彈出Google的搜索建議框
搜索“dynaTrace”
完成輸入后，按回車鍵或者點(diǎn)擊Google Search按鈕；
當(dāng)出現(xiàn)搜索結(jié)果后，點(diǎn)擊頁(yè)面頂部的“Maps”鏈接，切換到Google Maps；
你將看到很多關(guān)于dynaTrace地點(diǎn)的搜索結(jié)果。點(diǎn)擊在“95 Hayden Avenue，Lexington，MA”的“dynaTrace Software”，讓地圖顯示這個(gè)地址。
用Google Maps搜索dynaTrace
這是我的測(cè)試結(jié)果。在我們關(guān)閉瀏覽器之前，你可以快速看一下dynaTrace軟件界面，你會(huì)看到在“Bowsers”下面有一個(gè)節(jié)點(diǎn)，那就是當(dāng)前正在從IE中收集的信息。我們可以在運(yùn)行瀏覽器的同時(shí)分析這些數(shù)據(jù)，也可以關(guān)閉瀏覽器，然后再分析我們捕獲的。讓我們動(dòng)手分析吧——關(guān)閉瀏覽器，切換回dynaTrace AJAX軟件界面。
第四步：Summary視圖（摘要視圖）——高級(jí)分析
瀏覽器中記錄的事件被自動(dòng)存儲(chǔ)在一個(gè)session（譯者注：會(huì)話）中，我們可以在瀏覽器關(guān)閉的情況下分析這些被捕獲的瀏覽器活動(dòng)記錄。在左側(cè)cockpit面板中，你可以雙擊session，或者展開這個(gè)session節(jié)點(diǎn)，雙擊Summary節(jié)點(diǎn)。這兩種操作都會(huì)啟動(dòng)Summary視圖，它為我們呈現(xiàn)session記錄中所有活動(dòng)的高級(jí)分析結(jié)果：
Summary視圖顯示每個(gè)訪問(wèn)過(guò)的URL的高級(jí)分析結(jié)果
Summary視圖顯示了session記錄中所有訪問(wèn)過(guò)的URL鏈接的信息。點(diǎn)擊頂部表格中某個(gè)具體的url下方就會(huì)更新圖表和時(shí)間線來(lái)顯示所選鏈接的數(shù)據(jù)。在這個(gè)視圖中我們可以得到以下信息：
載入頁(yè)面所耗時(shí)間：Page Load Time[ms]（頁(yè)面載入時(shí)間[毫秒]）欄顯示從頁(yè)面開始載入到瀏覽器派發(fā)onload事件所經(jīng)歷的時(shí)間；
網(wǎng)絡(luò)請(qǐng)求花了多長(zhǎng)時(shí)間：下方NetWork餅圖從DNS解析、網(wǎng)絡(luò)連接、服務(wù)器響應(yīng)以及網(wǎng)絡(luò)傳輸方面詳細(xì)分解網(wǎng)絡(luò)請(qǐng)求過(guò)程，由于網(wǎng)絡(luò)內(nèi)容在這段時(shí)間里是并行下載的，所以NetWork[ms]欄則顯示的是所有網(wǎng)絡(luò)請(qǐng)求時(shí)間的總和；
下載了多少以及什么類型的資源文件，對(duì)比有多少資源是從瀏覽器緩存讀取的（Resource條形圖）；
通過(guò)JavaScript觸發(fā)器（腳本載入、載入完畢、鼠標(biāo)、鍵盤等事件）和JavaScript API或庫(kù)執(zhí)行的所有JavaScript函數(shù)一共耗時(shí)多長(zhǎng)時(shí)間；
渲染頁(yè)面所占時(shí)間。瀏覽器必須計(jì)算布局并渲染頁(yè)面顯示。瀏覽器重新計(jì)算布局和重繪的時(shí)間取決于你的HTML、樣式表以及動(dòng)態(tài)DOM操作。Rendering[ms]欄顯示了頁(yè)面在渲染工作上實(shí)際消耗的時(shí)間。
屏幕下方的時(shí)間軸圖顯示精確的頁(yè)面生命周期：該圖反映了頁(yè)面進(jìn)程中網(wǎng)絡(luò)資源下載、JavaScript執(zhí)行、頁(yè)面發(fā)生渲染的時(shí)間，CPU占用情況，以及發(fā)生了哪些事件。例如：onLoad事件、鼠標(biāo)或鍵盤交互、XmlHttpRequests等。
在我們的例子中，以下內(nèi)容引起了我的注意：
maps.google.com頁(yè)面的頁(yè)面載入時(shí)間為6.5秒：這是頁(yè)面在派發(fā)onload事件之前瀏覽器初始化html和所有引用的對(duì)象所消耗的時(shí)間；
這頁(yè)面的網(wǎng)絡(luò)時(shí)間耗時(shí)12秒。當(dāng)我觀察該頁(yè)面的Network餅圖時(shí)，我發(fā)現(xiàn)50%多的時(shí)間消耗在傳輸內(nèi)容（這也可能意味著我的網(wǎng)速慢）上，42%的時(shí)間花在服務(wù)器響應(yīng)上（指過(guò)了多長(zhǎng)時(shí)間服務(wù)器開始響應(yīng)），以及8%的時(shí)間消耗在與服務(wù)器建立物理連接上。
總耗時(shí)3.6秒的JavaScript也是重要角色。JavaScript trigger餅圖顯示時(shí)間的具體消耗情況：載入script耗時(shí)2.1秒，onload事件派發(fā)耗時(shí)1.3秒，剩下的由鼠標(biāo)點(diǎn)擊事件處理占用。
時(shí)間軸還顯示頁(yè)面發(fā)出了2個(gè)XmlHttpRequest請(qǐng)求。它由一個(gè)小圖標(biāo)標(biāo)注在event行中請(qǐng)求發(fā)生的時(shí)間點(diǎn)上。下一節(jié)將進(jìn)行更詳細(xì)的討論。
通過(guò)dynaTrace啟動(dòng)瀏覽器
如果你沒(méi)有看到這種情況出現(xiàn)，請(qǐng)到論壇的General Usage Question（譯者注：常見使用問(wèn)題）版塊查詢故障排除技巧，或者通過(guò)在線反饋或論壇聯(lián)系我們。接下來(lái)，請(qǐng)跟我完成這些步驟：
在搜索框里一字一頓的鍵入“dynaTrace”——每次輸入，你都會(huì)看到彈出Google的搜索建議框
搜索“dynaTrace”
完成輸入后，按回車鍵或者點(diǎn)擊Google Search按鈕；
當(dāng)出現(xiàn)搜索結(jié)果后，點(diǎn)擊頁(yè)面頂部的“Maps”鏈接，切換到Google Maps；
你將看到很多關(guān)于dynaTrace地點(diǎn)的搜索結(jié)果。點(diǎn)擊在“95 Hayden Avenue，Lexington，MA”的“dynaTrace Software”，讓地圖顯示這個(gè)地址。
用Google Maps搜索dynaTrace
這是我的測(cè)試結(jié)果。在我們關(guān)閉瀏覽器之前，你可以快速看一下dynaTrace軟件界面，你會(huì)看到在“Bowsers”下面有一個(gè)節(jié)點(diǎn)，那就是當(dāng)前正在從IE中收集的信息。我們可以在運(yùn)行瀏覽器的同時(shí)分析這些數(shù)據(jù)，也可以關(guān)閉瀏覽器，然后再分析我們捕獲的。讓我們動(dòng)手分析吧——關(guān)閉瀏覽器，切換回dynaTrace AJAX軟件界面。
第四步：Summary視圖（摘要視圖）——高級(jí)分析
瀏覽器中記錄的事件被自動(dòng)存儲(chǔ)在一個(gè)session（譯者注：會(huì)話）中，我們可以在瀏覽器關(guān)閉的情況下分析這些被捕獲的瀏覽器活動(dòng)記錄。在左側(cè)cockpit面板中，你可以雙擊session，或者展開這個(gè)session節(jié)點(diǎn)，雙擊Summary節(jié)點(diǎn)。這兩種操作都會(huì)啟動(dòng)Summary視圖，它為我們呈現(xiàn)session記錄中所有活動(dòng)的高級(jí)分析結(jié)果：
Summary視圖顯示每個(gè)訪問(wèn)過(guò)的URL的高級(jí)分析結(jié)果
Summary視圖顯示了session記錄中所有訪問(wèn)過(guò)的URL鏈接的信息。點(diǎn)擊頂部表格中某個(gè)具體的url下方就會(huì)更新圖表和時(shí)間線來(lái)顯示所選鏈接的數(shù)據(jù)。在這個(gè)視圖中我們可以得到以下信息：
載入頁(yè)面所耗時(shí)間：Page Load Time[ms]（頁(yè)面載入時(shí)間[毫秒]）欄顯示從頁(yè)面開始載入到瀏覽器派發(fā)onload事件所經(jīng)歷的時(shí)間；
網(wǎng)絡(luò)請(qǐng)求花了多長(zhǎng)時(shí)間：下方NetWork餅圖從DNS解析、網(wǎng)絡(luò)連接、服務(wù)器響應(yīng)以及網(wǎng)絡(luò)傳輸方面詳細(xì)分解網(wǎng)絡(luò)請(qǐng)求過(guò)程，由于網(wǎng)絡(luò)內(nèi)容在這段時(shí)間里是并行下載的，所以NetWork[ms]欄則顯示的是所有網(wǎng)絡(luò)請(qǐng)求時(shí)間的總和；
下載了多少以及什么類型的資源文件，對(duì)比有多少資源是從瀏覽器緩存讀取的（Resource條形圖）；
通過(guò)JavaScript觸發(fā)器（腳本載入、載入完畢、鼠標(biāo)、鍵盤等事件）和JavaScript API或庫(kù)執(zhí)行的所有JavaScript函數(shù)一共耗時(shí)多長(zhǎng)時(shí)間；
渲染頁(yè)面所占時(shí)間。瀏覽器必須計(jì)算布局并渲染頁(yè)面顯示。瀏覽器重新計(jì)算布局和重繪的時(shí)間取決于你的HTML、樣式表以及動(dòng)態(tài)DOM操作。Rendering[ms]欄顯示了頁(yè)面在渲染工作上實(shí)際消耗的時(shí)間。
屏幕下方的時(shí)間軸圖顯示精確的頁(yè)面生命周期：該圖反映了頁(yè)面進(jìn)程中網(wǎng)絡(luò)資源下載、JavaScript執(zhí)行、頁(yè)面發(fā)生渲染的時(shí)間，CPU占用情況，以及發(fā)生了哪些事件。例如：onLoad事件、鼠標(biāo)或鍵盤交互、XmlHttpRequests等。
在我們的例子中，以下內(nèi)容引起了我的注意：
maps.google.com頁(yè)面的頁(yè)面載入時(shí)間為6.5秒：這是頁(yè)面在派發(fā)onload事件之前瀏覽器初始化html和所有引用的對(duì)象所消耗的時(shí)間；
這頁(yè)面的網(wǎng)絡(luò)時(shí)間耗時(shí)12秒。當(dāng)我觀察該頁(yè)面的Network餅圖時(shí)，我發(fā)現(xiàn)50%多的時(shí)間消耗在傳輸內(nèi)容（這也可能意味著我的網(wǎng)速慢）上，42%的時(shí)間花在服務(wù)器響應(yīng)上（指過(guò)了多長(zhǎng)時(shí)間服務(wù)器開始響應(yīng)），以及8%的時(shí)間消耗在與服務(wù)器建立物理連接上。
總耗時(shí)3.6秒的JavaScript也是重要角色。JavaScript trigger餅圖顯示時(shí)間的具體消耗情況：載入script耗時(shí)2.1秒，onload事件派發(fā)耗時(shí)1.3秒，剩下的由鼠標(biāo)點(diǎn)擊事件處理占用。
時(shí)間軸還顯示頁(yè)面發(fā)出了2個(gè)XmlHttpRequest請(qǐng)求。它由一個(gè)小圖標(biāo)標(biāo)注在event行中請(qǐng)求發(fā)生的時(shí)間點(diǎn)上。下一節(jié)將進(jìn)行更詳細(xì)的討論。
第五步：Timeline視圖（時(shí)間軸視圖）——近距離觀察頁(yè)面生命周期事件
時(shí)間軸視圖可以通過(guò)雙擊Cockpit面板中的Timeline節(jié)點(diǎn)打開，或者在Summary視圖中通過(guò)在某個(gè)URL上點(diǎn)擊右鍵，選擇“Drill Down-TimeLine”打開。我們用這種方式打開maps.google.com頁(yè)面：
查看某個(gè)url的Timeline
點(diǎn)擊“drill down（譯者注：詳細(xì)）”菜單將打開所選頁(yè)面的Timeline視圖，通過(guò)工具欄和右鍵菜單，你可以打開更多選項(xiàng)，比如內(nèi)容類型和JavaScript觸發(fā)器的顏色值，或者顯示更多事件，比如鼠標(biāo)移動(dòng)，點(diǎn)擊和鍵盤事件。下面的截圖顯示時(shí)間軸開啟更多選項(xiàng)的效果：
針對(duì)選定頁(yè)面的Timeline顯示網(wǎng)絡(luò)、JavaScript、渲染、CPU和事件
我們可以在此視圖下做如下觀測(cè)：
網(wǎng)絡(luò)請(qǐng)求并行下載來(lái)自6個(gè)不同域的內(nèi)容；
到瀏覽器派發(fā)onload事件大約需要6.5秒（圖中由IE圖標(biāo)標(biāo)識(shí)）；
從maps.gstatic.com下載main.js耗時(shí)2.41秒（鼠標(biāo)懸停在這段上可以看到詳細(xì)信息）；
main.js下載完成后，可以看到腳本實(shí)際執(zhí)行耗時(shí)1.1秒，并觸發(fā)兩個(gè)JavaScript文件的下載（1秒）和另外2個(gè)JavaScript的執(zhí)行（2秒）；
CPU占用率顯示JavaScript執(zhí)行占用的瀏覽器CPU時(shí)間；
Event軸顯示了鼠標(biāo)點(diǎn)擊事件，XmlHttpRequest事件和onUnload事件。
我們縮大鼠標(biāo)第一次點(diǎn)擊到產(chǎn)生XmlHttpRequest請(qǐng)求的時(shí)段。在我的例子中，這個(gè)時(shí)間片是從11秒到12秒。通過(guò)在開始處點(diǎn)擊鼠標(biāo)左鍵拖拽到結(jié)束位置來(lái)執(zhí)行放大操作。當(dāng)你松開鼠標(biāo)拖拽的，視圖將放大到下面截圖中顯示的時(shí)間片上：
放大時(shí)間軸以顯示事件詳細(xì)信息
時(shí)間軸上顯示了點(diǎn)擊事件，一個(gè)XmlHttpRequest事件，其后緊隨一個(gè)onError事件，再后一點(diǎn)還有一個(gè)XmlHttpRequest(XHR)事件。鼠標(biāo)懸停在事件上將顯示實(shí)際派發(fā)事件的DOM元素。鼠標(biāo)懸停在JavaScript上將顯示腳本執(zhí)行事件處理的時(shí)間，懸停在network請(qǐng)求上將顯示下載了哪些資源。我們也能看到瀏覽器執(zhí)行了哪些類型的渲染。我們發(fā)現(xiàn)第一次鼠標(biāo)點(diǎn)擊事件處理函數(shù)觸發(fā)新內(nèi)容的加載——包括一個(gè)來(lái)自maps.gstatic.com的JavaScript文件。執(zhí)行這個(gè)JavaScript文件——一旦它被加載以后——觸發(fā)了一個(gè)XHR請(qǐng)求。我們還能看到一個(gè)onError時(shí)間處理函數(shù)被觸發(fā)并且運(yùn)行了240毫秒。
第六步：PurePath視圖（路徑視圖）——JavaScript、DOM和Ajax問(wèn)題的詳細(xì)說(shuō)明
從Timeline視圖（和從其他視圖一樣）我們可以更進(jìn)一步進(jìn)入每個(gè)動(dòng)作去觀察事件觸發(fā)執(zhí)行了哪些JavaScript函數(shù)和哪些JavaScript函數(shù)發(fā)出了XHR請(qǐng)求。在時(shí)間軸上點(diǎn)右鍵選擇“Drill Down to Timeframe”(進(jìn)入詳細(xì)時(shí)間片)將來(lái)到PurePath視圖，并顯示當(dāng)前所放大的時(shí)間片上所有的活動(dòng)——如下圖：
進(jìn)入指定時(shí)間片的PurePath視圖
在界面上方，我們可以看到所選時(shí)間片中瀏覽器的所有活動(dòng)，包括由script標(biāo)簽或事件響應(yīng)觸發(fā)的JavaScript的執(zhí)行情況。也包括網(wǎng)絡(luò)請(qǐng)求和渲染次數(shù)。Stats（譯者注：統(tǒng)計(jì)）欄顯示該行執(zhí)行的JavaScript觸發(fā)的是計(jì)時(shí)器還是Ajax請(qǐng)求。那些占總體響應(yīng)時(shí)間較多的活動(dòng)會(huì)被彩色高亮顯示。
在PurePath列表中選擇一個(gè)活動(dòng)，PurePath或JavaScript追蹤樹將更新顯示當(dāng)前所選活動(dòng)的信息。PurePath樹顯示了JavaScript代碼執(zhí)行過(guò)程，包括每個(gè)方法執(zhí)行的時(shí)間和調(diào)用的參數(shù)以及返回值（我們?cè)诘诙街虚_啟了參數(shù)捕獲選項(xiàng)）。代碼跟蹤也追蹤計(jì)時(shí)器調(diào)用，并把這些調(diào)用當(dāng)做樹的一部分。我們不僅能看到JavaScript方法，也能看到DOM訪問(wèn)和AJAX請(qǐng)求。
我們后退一步，回到前一個(gè)Timeline視圖。我對(duì)Ajax請(qǐng)求比較感興趣。雙擊Event行中的圖標(biāo)打開一個(gè)新的PurePath視圖，軟件會(huì)在JavaScript跟蹤中找出實(shí)際執(zhí)行這個(gè)XmlHttpRequest的位置：
進(jìn)入PurePath視圖分析XmlHttpRequest細(xì)節(jié)
在界面上方我們能看到的執(zhí)行這段代碼的JavaScript文件——請(qǐng)看Details欄。在樹中我們能看到發(fā)出這個(gè)XHR請(qǐng)求的整個(gè)JavaScript執(zhí)行過(guò)程，包括方法調(diào)用次數(shù)和調(diào)用參數(shù)。duration欄顯示JavaScript執(zhí)行共耗時(shí)1127毫秒。這個(gè)時(shí)間包含了XHR返回的時(shí)間和等待JavaScript計(jì)時(shí)器的時(shí)間。打開這個(gè)網(wǎng)絡(luò)請(qǐng)求的詳細(xì)信息（譯者注：在PurePath樹中定位的Network Request上點(diǎn)右鍵，選擇“Details”），將顯示Http請(qǐng)求和響應(yīng)頭、請(qǐng)求的精確時(shí)間，包括連接、等待、服務(wù)器響應(yīng)和網(wǎng)絡(luò)傳輸時(shí)間，還有從服務(wù)器返回的實(shí)際內(nèi)容（譯者注：在Details面板底部有個(gè)切換標(biāo)簽Details/Response Content可以查看）。
XmlHttpRequest請(qǐng)求詳細(xì)信息
這個(gè)請(qǐng)求有趣的地方是服務(wù)器花了372毫秒返回了一個(gè)空的json對(duì)象。從這我們可以繼續(xù)分析，看一下是什么實(shí)際完成這個(gè)Ajax響應(yīng)的。回到PurePath樹，我們“drill down”到onreadystatechange事件處理函數(shù)（譯者注：在NetWork Request下有三個(gè)“JavaScript Execution”，是onreadystatechange觸發(fā)的三次函數(shù)調(diào)用，展開第三個(gè)可以看到這里的readyState為4，開始調(diào)用響應(yīng)函數(shù)，一個(gè)匿名函數(shù)anonymous即是onreadystatechange的事件處理函數(shù)）。下面的截圖顯示了這個(gè)處理函數(shù)，右下方顯示這個(gè)函數(shù)的代碼：
分析XHR請(qǐng)求的JavaScript處理函數(shù)
這里最有意思的是左下方Contributor欄顯示了當(dāng)前所選子樹的所有JavaScript活動(dòng)。最上面一行顯示使用了一個(gè)動(dòng)態(tài)script標(biāo)簽，標(biāo)簽的內(nèi)容被寫入一段腳本來(lái)讓瀏覽器動(dòng)態(tài)加載了一個(gè)JavaScript文件。雙擊Contributor欄中的這條數(shù)據(jù)定位到PurePath樹中的位置（譯者注：可能要拖動(dòng)橫向滾動(dòng)條、拉寬PurePath樹的顯示寬度才能看到，這個(gè)位置折疊的層級(jí)很深）：
動(dòng)態(tài)創(chuàng)建一個(gè)Script標(biāo)簽并插入到DOM中
在這里我觀察到：
一個(gè)計(jì)時(shí)器用了大概740毫秒來(lái)觸發(fā)計(jì)時(shí)器處理函數(shù)——注意截圖中第三行的setTimeout方法調(diào)用；
創(chuàng)建了一個(gè)動(dòng)態(tài)Script標(biāo)簽，并把它添加到head中，指示瀏覽器下載這個(gè)Script文件。（譯者注：通過(guò)觀察我覺(jué)得“<標(biāo)簽名>”即指代一個(gè)[標(biāo)簽名]類型的DOM對(duì)象，.setAttrbute、.appendChild即為調(diào)用該DOM對(duì)象的DOM方法。）
PurePath視圖提供了多種分析方法。你可以通過(guò)直接鍵入（譯者注：幾乎在任何地方都可以執(zhí)行鍵入查找操作，只要點(diǎn)擊一下要查找信息的控件，使其獲得焦點(diǎn)，然后按鍵即可）你要查找的內(nèi)容來(lái)篩選或查找你需要的數(shù)據(jù)項(xiàng)。通過(guò)右鍵菜單或工具欄按鈕添加過(guò)濾規(guī)則可以讓軟件只顯示特定信息。
第七步：Network視圖（網(wǎng)絡(luò)視圖）——分析“對(duì)話”
Network視圖顯示了發(fā)生在瀏覽器或各自頁(yè)面中的所有網(wǎng)絡(luò)請(qǐng)求。通過(guò)雙擊左側(cè)Cockpit面板中的Network節(jié)點(diǎn)，或從Summary視圖中某個(gè)URL上右擊選擇“Drill Down – Network”進(jìn)入到Network視圖。在我的例子中，我回到Summary視圖，然后“Drill Down”進(jìn)入maps.google.com的Network視圖：
Network視圖高亮標(biāo)記出超慢的請(qǐng)求以及連接等待時(shí)間
這個(gè)視圖下會(huì)用顏色標(biāo)記每個(gè)請(qǐng)求，并且用紅色高亮標(biāo)記出耗時(shí)最長(zhǎng)的下載請(qǐng)求。默認(rèn)情況下，這個(gè)視圖是按“Time Chart”欄排序的，Time Chart欄顯示瀏覽器發(fā)送的請(qǐng)求隊(duì)列。
從每個(gè)請(qǐng)求上我們可以到的資源是否來(lái)自瀏覽器緩存（Cached欄），請(qǐng)求類型（Network或Ajax），HTTP狀態(tài)，Mime類型，大小，在DNS、網(wǎng)絡(luò)連接、服務(wù)器響應(yīng)、網(wǎng)絡(luò)傳輸和等待上消耗的時(shí)間。界面底部顯示了HTTP請(qǐng)求和響應(yīng)頭以及返回的實(shí)際內(nèi)容。這個(gè)頁(yè)面中有趣的地方是從mt0.google.com和mt1.google.com取回?cái)?shù)據(jù)時(shí)的等待時(shí)間。每個(gè)瀏覽器針對(duì)每個(gè)域名都有一個(gè)連接數(shù)上限。
在我的例子中（WinXP系統(tǒng)，IE7瀏覽器）是每個(gè)域名最多保持兩個(gè)連接數(shù)。20個(gè)PNG圖片從兩個(gè)域中加載過(guò)來(lái)。由于連接數(shù)限制，使得每個(gè)域名只能并行下載兩個(gè)圖片。其他圖片便是不得不等待一個(gè)可用的連接數(shù)。這就解釋了為什么這些圖片和不斷增加的等待時(shí)間呈“瀑布”型。我們可能不希望在不同瀏覽器和不同連接數(shù)情況下出現(xiàn)像這里這樣的效果。解決這個(gè)問(wèn)題是使用域名碎片（Domain Sharding）或者CSS拼圖（CSS Sprite）。
和其他視圖一樣，從這里可以進(jìn)入PurePath。我們定位到頁(yè)面上第二個(gè)Ajax請(qǐng)求。對(duì)Kind列進(jìn)行排序，然后選擇一個(gè)響應(yīng)類型為text/xml的請(qǐng)求。點(diǎn)擊鼠標(biāo)右鍵，選擇Drill Down->PurePath，進(jìn)入PurePath視圖，軟件將自動(dòng)定位到JavaScript追蹤中發(fā)出這個(gè)XHR請(qǐng)求的JavaScript函數(shù)上。
進(jìn)入PurePath視圖
如果你的服務(wù)端運(yùn)行有dynaTrace APM，則可以進(jìn)入Server-side PurePath視圖，將顯示Java或.NET程序在服務(wù)端響應(yīng)Ajax請(qǐng)求執(zhí)行的細(xì)節(jié)。這里有視頻可以了解更多。
第八步：Hotspot視圖（熱點(diǎn)視圖）——哪些地方降低了性能
最后一個(gè)有趣的視圖就是Hotspot視圖。通過(guò)Cockpit面板打開，或者Summary視圖打開來(lái)分析一個(gè)具體URL。本例中我們從Cockpit中打開HotSpot視圖來(lái)分析我訪問(wèn)過(guò)的頁(yè)面中所有的JavaScript、DOM和渲染動(dòng)作。
Hotspot視圖顯示了有問(wèn)題的活動(dòng)，包括活動(dòng)前后的追蹤
上方的表格以聚合的方式顯示所有JavaScript、DOM和渲染動(dòng)作。我們可以看到130次的Drawing動(dòng)作，946次Reflow動(dòng)作以及在一個(gè)div上調(diào)用了一個(gè)匿名函數(shù)1293次。這個(gè)列表是按總的執(zhí)行時(shí)間排序的，性能越高排序越靠上。
雙擊這些中的一個(gè)，將顯示它執(zhí)行前后的追蹤結(jié)果。Back Traces表顯示了誰(shuí)來(lái)調(diào)用這些動(dòng)作，F(xiàn)orward Traces表顯示的是這個(gè)動(dòng)作又觸發(fā)了哪些動(dòng)作。界面底部顯示了在Back Traces樹或Forward Traces樹中選中的JavaScript的源碼。我雙擊了那個(gè)調(diào)用946次的reflow動(dòng)作。reflow動(dòng)作在瀏覽器下載圖片或者其他對(duì)象或者應(yīng)用樣式時(shí)觸發(fā)。不過(guò)，它也在訪問(wèn)某些DOM屬性或調(diào)用某些DOM方法時(shí)觸發(fā)。在Back Traces中顯示讀取offset或height屬性會(huì)引起瀏覽器渲染引擎的一個(gè)reflow動(dòng)作。回溯可以看到哪個(gè)JavaScript方法訪問(wèn)了DOM。從界面上方的Contributor表可以進(jìn)入PurePath視圖。打開PurePath將展開包含當(dāng)前選中的方法的PurePath樹——類似前面我們展開XHR請(qǐng)求的PurePath樹。
第九步：自動(dòng)化數(shù)據(jù)集
除了用dynaTrace手動(dòng)收集數(shù)據(jù)，也可以用腳本工具代替人工方式驅(qū)動(dòng)瀏覽器自動(dòng)收集數(shù)據(jù)。當(dāng)你用像Selenium、Watir、WebAii這樣的工具運(yùn)行測(cè)試腳本是，dynaTrace可以自動(dòng)從每個(gè)瀏覽器session中收集性能信息。這里有篇博文《5步實(shí)現(xiàn)性能自動(dòng)分析》，教你如何用Watir配合dynaTrace自動(dòng)分析。
第十步：與你的同事分享數(shù)據(jù)
收集信息并制成離線版分析數(shù)據(jù)是dynaTrace的功能之一，上面你已經(jīng)領(lǐng)略到了。如果你在別人的代碼中發(fā)現(xiàn)了問(wèn)題，或者你想跟你的同事分享你的發(fā)現(xiàn)，你需要一種簡(jiǎn)單的方式共享你收集到的數(shù)據(jù)。這可以通過(guò)把你的session導(dǎo)出為session文件實(shí)現(xiàn)。在Cockpit面板中的右鍵菜單或者工具條里的導(dǎo)出按鈕能完成這一工作。導(dǎo)入文件的操作與此類似。
導(dǎo)入導(dǎo)出dynaTrace session文件
總結(jié)和反饋
dynaTrace AJAX版是一款非常棒的針對(duì)IE6、7、8的分析和測(cè)試工具。社區(qū)已大力推廣第一個(gè)官方版軟件，它兼容前一個(gè)測(cè)試版。我們鼓勵(lì)大家積極參與這款軟件的推進(jìn)工作，通過(guò)社區(qū)網(wǎng)站或軟件工具欄的報(bào)告功能報(bào)告使用問(wèn)題。
工具欄中的反饋、分享和報(bào)告問(wèn)題按鈕
工具欄里有三個(gè)按鈕可以讓你與好友分享這款軟件、給我們反饋信息或者報(bào)告使用問(wèn)題。目前我們的許多客戶使用AJAX版來(lái)確定和解決他們的瀏覽器前端組件問(wèn)題，至今我們已經(jīng)從他們那里得到了一些很好的意見。這些用戶也使用了集成dynaTrace無(wú)縫APM解決方案，為他們提供從瀏覽器到后臺(tái)的端到端全方位分析。感謝你跟著我一起完成了這個(gè)有點(diǎn)長(zhǎng)的學(xué)習(xí)指南。歡迎給這篇博客留言，說(shuō)說(shuō)你在dynaTrace或者其他工具使用上的經(jīng)驗(yàn)。
原文地址http://www.wangyuxiong.com/archives/51421