dynaTrace Ajax：前端性能分析利器(3)

　　網絡請求并行下載耗時，一方面來自請求的數目太多，其中一個比較明顯的就是有一個 XMLHttpRequest 花在 Server 的處理耗時將近 7 秒的時間

　　Event 軸顯示了鼠標點擊事件，XMLHttpRequest 事件和 OnLoad 事件

　　放大右邊網絡請求時間比較長的部分(在我的例子中，從 16s 到 29s 時間片 ), 通過在開始處點擊鼠標左鍵拖拽到結束位置松開鼠標拖拽，視圖將放大到下面截圖中顯示的時間片上，如下圖 8 所示 :

　　圖 8. 放大時間軸

　　通過放大的時間片右鍵選擇“Drill Down to Timeframe e”進入 PurePath 視圖，顯示當前所放大的時間片上所有的活動。

　　PurePath( 路徑視圖 ) - JavaScript、DOM 和 Ajax 問題的詳細說明

　　可以通過雙擊 Cockpit 面板中的 PurePath 節點打開也可以選中時間軸上的一段右鍵選擇“Drill Down to Timeframe ”來到 PurePath 視圖，進一步進入每個動作去觀察哪些事件觸發執行了 JavaScript 和哪些函數的執行耗時比較長。

　　這里接著上節所述進入 PurePath 視圖 , 如下圖所示：

　　圖 9.PurePath 視圖

　　鼠標點擊上圖中的第二個時間片即 JS 占用 14 秒的，面板同時會更新當前所選活的信息，顯示 JavaScript 代碼執行過程，包括每個方法的執行時間和調用的參數及返回值。我們不僅可以看到 JavaScript 方法，也能看到 DOM 訪問和 Ajax 請求。

　　從詳細信息欄我們可觀察到

　　1.Start : 一個活動的開始時間

　　2.Duration[ms] : 活動的持續時間，包含子樹的活動時間

　　3.JS[ms] :JavaScript 執行總的耗時，包括異步的子樹執行時間但不包括等待時間

　　4.Total[ms] ：活動本身從開始到結束的持續時間 , 不包含子活動的執行時間

　　5.Exec[ms] ：活動本身執行時間，不包括其子活動的需要的時間

　　6.Size : 樹中總的節點數，包含所有子活動的節點數。

　　鼠標點擊上面任何一列可進行排序操作，根據 JS 執行時間長短通過鼠標點擊展開也可以通過右鍵點擊“擴展子樹”展開層次圖找到是哪個方法的調用導致執行了這么長的時間。從上圖調用棧中可看出 contentDomHandle 來自應用程序的 JavaScript API 的調用總耗時最長，從它的子樹中可觀察到 JavaScript 執行的時間分布：

　　1.addContextMenu

　　方法執行次數比較多，雖然方法本身的執行時間 150ms，但調用次數比較多的話就會導致總的執行時間比較長。

　　2.SimulateSlideClick耗時2.5 秒

　　3.concord.util.events.publish耗時3 秒

　　為了更方便發現這些函數的性能問題，可以右鍵 contentDomHandle 方法，選擇“Drill Down->Hot Spots ”進入 HotSpots 視圖 。

　　另外，PurePath 視圖提供了多種分析方法，您可以通過直接鍵入您要查找的內容來篩選或查找您需要的數據項，也通過右鍵菜單或工具欄按鈕添加過濾規則可以讓軟件只顯示特定信息。

　　HotSpot( 熱點視圖 ) - 哪些地方降低了性能

　　綜上所述，可以從 PurePath-->Drill Down 進入該視圖，也可以從面板中直接打開 HotSpot 視圖來分析瀏覽中訪問過的所有 JavaScript、DOM 和頁面渲染操作。

　　接著上一節的 contentDomHandle () 方法調用為例，如下圖所示：

　　圖 10.Hotspot 案例視圖

　　從上圖中可以看到每個方法的調用次數，JS 的執行時間以及總的執行時間等信息：

　　1.Back Traces 欄顯示了由誰調用了這個函數，調用了幾次，從上圖可看到該方法被 Dojo 的 調用了 2 次，而方法本身調用的執行時間很短只有 3ms(Exec[ms])

　　2.Forward Traces 欄顯示了這個方法又調用了哪些函數，Invocations 表示該方法總共被調用了幾次;活動總耗時 12.7s(Total[ms]),Exec[ms] 表示方法本身執行所需要的時間，JS[ms] 總的 JavaScript 的執行時間。

　　3.界面底部顯示了在 Back Traces 樹或 Forward Traces 樹中選中的 JavaScript 的源碼

　　從我的例子中，就會很明顯的發現如下性能問題：

　　1.addContexMenu(

　　) 被調用了 30 次，JavaScript 執行消耗了將近 7 秒。根據了解這個方法的作用就是為每個 Slide 添加右鍵菜單，也就是說文件包含 30 頁就會被調用 30 次，這樣不僅會增加瀏覽器的執行時間，也會占用比較多的內存。

原文轉自：http://www.uml.org.cn/Test/201309062.asp