dynaTrace Ajax：前端性能分析利器

　　簡介： 本文結合實際案例，針對 dynaTrace Ajax 所包含的各個組件的功能進行了詳細的講解，以幫助前端開發人員或測試人員使用該工具快速發現 Web 前端的性能問題。

　　什么是 dynaTrace Ajax

　　隨著 jQuery、Dojo、YUI 等框架的興起讓構建 Web2.0 應用更加容易，但隨之帶來的定位等應用問題也越來越難，尤其是與性能相關的。dynaTrace Ajax Edition 是一個強大的底層追蹤、前端性能分析工具，該工具不僅能夠記錄瀏覽器的請求在網絡中的傳輸時間、前端頁面的渲染時間、DOM 方法執行時間以及 JavaScript 代碼的解析和執行時間，還可以跟蹤 JavaScript 從執行開始，經過本地的 XMLHttpRequest、發送網絡請求、再到請求返回的全過程。

　　dynaTrace Ajax 目前有兩個版本，免費版和商業版，它們之間的區別可查看 版本比較，本文主要是針對免費版本的介紹。在 3.0 之前的版本只支持運行在 IE 瀏覽器下，包括 IE6、IE7、IE8， 在 3.0 Beta 版之后可同時支持在 IE 和 Firefox 瀏覽器上的性能跟蹤。

　　dynaTrace Ajax 安裝和使用

　　下載 DynaTrace 最新的版本 , 雙擊安裝文件，點擊“下一步”便可完成安裝，安裝好的操作界面如圖 1 所示：

　　圖 1. 安裝好的操作界面

　　點擊中間齒輪狀的圖標可對工具的屬性進行配置，如下圖 2 所示：

　　圖 2.Preferences( 屬性配置 )

　　從上圖的：

　　“General ”面板：可設置服務端口，網絡代理設置以及瀏覽器的啟動路徑等;

　　“Agent ”面板：可設置獲取參數的配置，例如可配置是否獲取 DOM 的訪問或方法參數和返回值等，默認會選擇所有選項。

　　可以通過兩種方式啟動 DTA 跟蹤您的頁面：

　　直接通過工具啟動，如圖 1 所示，點擊瀏覽器旁邊的下拉按鈕進入 “Manage Run Configurations” 或直接點擊 “New Run Configuration” 添加所要跟蹤的 URL。由于它可以運行在多頁面的工作流之下，可以先輸入起始網址，然后導航到其他網頁，dynaTrace 會在后臺監視一切。

　　圖 3.Manage Run Configurations( 管理運行配置 )

　　從瀏覽器啟動 dynaTrace: 先打開瀏覽器，進入需要跟蹤的界面，再點擊瀏覽器工具欄的按鈕，如下圖所示(使用前在瀏覽器插件中 Enable 該工具 ),Connected/not Connected 用以表示當前的追蹤狀態

　　圖 4. 瀏覽器啟動

　　在關閉瀏覽器之前，可以快速看一下 dynaTrace 軟件界面，會看到在“Browsers ”下面有一個節點，那就是當前正在從瀏覽器中收集的信息。我們可以在運行瀏覽器的同時分析這些數據，也可以關閉瀏覽器，再從 Sessions 中分析捕獲的信息。

　　此外，在實際的操作過程當中，可能會需要跟蹤打開頁面后的一系列操作(例如點擊某個按鈕觸發的事件等), 免費版的 dynaTrace 跟蹤的信息不能按照 Page 或者 Action 自動進行分離，這種情況下，我們可以通過在操作過程中通過添加標記 (Insert Mark ) 的方式從 PurePath 視圖中來區分每個 Action 行為的時間分割。即在操作前添加一個標記，操作完成后再添加一個標記，再從 PurePath 視圖中分析所添加標記之間的比較耗時的請求。如下圖 5 所示：

　　圖 5. 添加標記 (PurePath 視圖 )

　　此外，它還具有導入導出的的功能即將收集到的數據導出為 session 文件再導入到 DynaTrace 里面進行分析。具體操作可通過在 Cockpit 面板中 Sessions 文件夾下選擇要導出的 Session，右鍵或者從工具條里的點擊 Export Session 按鈕即能完成導出操作，導入文件的操作與此類似。

　　背景知識

　　在討論 dynaTrace 工具之前，先簡單了解一下在 Web2.0 下經常會碰到的一些客戶端的性能問題，這些話題雖然不是本文的主題，但是和本文密切相關，因為您知道了大致存在的問題，再使用相應的工具去發現這些問題就會簡單很多。

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