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

　　2.對于其他兩個比較耗時的方法，simulateSlideClick 和 events.publish 方法各調用了將近 3 秒和 2.5 秒的時間，調用次數也不多，這就需要擴展 Trace 去看是否存在性能問題或還有可以改進的地方;

　　到這里我們基本可以找出從時間軸視圖中耗時 13 秒的 JavaScript 具體是被哪些函數的調用占用了，也發現了一些比較明顯的性能問題。再回到 HotSpot 總的頁面看是否還有其他性能問題 ( 從 Cockpit 面板中雙擊 HotSpot 節點 )，如下圖所示：

　　圖 11.HotSpot 視圖

　　上圖默認是按照操作或方法本身的耗時 (Exec[ms]) 不包括子方法來排序的 , 我們發現除了瀏覽器的渲染比較耗時之外，最有可能存在性能問題的就是應用程序方法的調用。例如在我這個案例中，就發現以下幾個問題：

　　loadState 總共(包括子方法)執行了 3.7 秒，方法本身就消耗了將近 2 秒的時間，這個方法僅被調用了一次，是否有改進的空間就需要通過源碼看進去或直接跟開發人員溝通;

　　dojo.destroy(

　　) 被調用了 122 次，總共花了 1.3 秒的時間;

　　雙擊 dojo.destroy(div)，打開它的 Back Traces，如下圖所示：

　　圖 12.dojo.destroy

　　從上圖可得知，dojo.destroy(

　　) 僅被 applySlideSorterStyles 方法調用了一次就執行了 1 秒的時間，這也是比較可疑的性能問題。另外，您也可以通過總的執行時間來排序，如下圖所示，這里您可以找到最耗時的方法的入口：

　　圖 13. 按總消耗時間排序

　　Network(網絡視圖) - 分析“對話”

　　最后我們再來看一下 dynaTrace 的另一個視圖 - Network 視圖，通過雙擊左側 Cockpit 面板中的 Network 節點，或從 Summary 視圖中某個 URL 上右鍵選擇“Drill Down – Network”進入到 Network 視圖，該圖顯示了所有網絡請求，如下圖所示：

　　圖 14.NetWork 視圖

　　Network 視圖高亮標記出超慢的請求以及連接等待時間。

　　這個視圖下會用顏色標記每個請求，并且用紅色高亮標記出耗時最長的下載請求。默認情況下會以 TimeLine 上的發生順序來排列，您可以點擊任何一列來進行排序。對于每個請求我們可以看到資源是否來自瀏覽器緩存(Cached 欄)，請求類型(Network 或 Ajax)，HTTP 狀態，Mime 類型，大小，在 DNS、網絡連接、服務器響應、網絡傳輸和等待上消耗的時間。界面底部顯示了 HTTP 請求和響應頭以及返回的實際內容。

　　常見的性能問題及解決辦法：

　　JS 或 CSS 的個數太多：需適當的合并同域下的 JS 或 CSS 以降低客戶端的請求數目

　　JS 的尺寸太大導致在局域網的條件下下載時間太長：可以對尺寸比較大的文件在服務器端進行壓縮，例如使用 Dojo ShrinkSafe 或 YUI 進行壓縮

　　圖片數量太多：可使用 CSS Sprites 將一些小的圖片組合在一起成為一張圖片，這樣可以減輕服務器的負載，提高網頁的加載速度

　　自動化收集數據

　　通常我們都是對性能上有問題的頁面利用手動的方式訪問每個頁面再用 dynaTrace 記錄和收集數據，但若是對每個頁面都要記錄或是針對每個不同的應用程序的版本僅對幾個頁面做這些操作也是需要付出比較大的人力。幸好 dynaTrace 還提供了我們一些新的 Feature 可以用腳本工具代替人工方式驅動瀏覽器自動收集數據。當您用像 Selenium、Watir、WebAii 這樣的工具運行測試腳本時，dynaTrace 可以自動從每個瀏覽器 session 中收集性能信息。

　　如何使用 Selenium 整合 dynaTrace 實現自動化收集數據有兩種方式 ;

　　1.使用 DynaTrace 提供的一些高級的 Features, 如 dynaTrace Selenium Runner(僅商業版用戶)

　　(com.dynatrace.webautomation.DynaTraceSeleniumRunner). 或 DynaTraceSeleniumHelper

　　(com.dynatrace.webautomation.DynaTraceSeleniumHelper) 或使用 DynaTraceSelenium 替代 DefaultSelenium，如以下 code:

public class GoSpaceDynaTraceSeleniumTest { 
    Selenium selenium = null; 
    @Before 
    public void startup() { 
        selenium = new DynaTraceSelenium("localhost", 4444, "*iexplore", 
                                          "http://localhost:9090"); 
        selenium.start(); 

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