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

　　在 Web2.0 應用程序中，JavaScript 的執行常常會阻礙瀏覽器端資源的下載和增加頁面的 Loading 的時間，導致這個問題的因素主要有：

　　瀏覽器本身的因素，例如在 IE 瀏覽器下 ,CSS Selectors 的查找速度相比其他瀏覽器如 Firefox 相對會慢很多

　　CSS 對相同對象的查詢次數太多

　　存在太多 Ajax 的 XMLHttpRequest 請求

　　JS、CSS、圖片數量過多，增加了網絡傳輸開銷

　　DOM 的尺寸太大，一方面會增加內存的占用，另一方也會影響頁面的性能，例如 CSS 的查詢操作

　　豐富的 DOM 操作，例如創建新的 DOM 元素或是作為 HTML 形式添加新的元素等

　　過多的事件處理綁定(Event Handler Bindings)等

　　下面將結合實際工作中碰到的案例，介紹如何使用 dynaTrace 來跟蹤和分析客戶端的性能問題。

　　應用案例分析

　　下面記錄的結果是以我們目前正開發的一個實際項目(IBM Docs)中的一個案例 - 在 Web 中打開一個 PPT 文檔，根據 dynaTrace 收集的信息來分析存在的性能問題。

　　Performance Report( 性能報告視圖 )

　　從 Cockpit 面板中打開 Performance Report 視圖，如圖 6 所示：

　　圖 6. 性能報告

　　性能報告視圖中記錄了所有訪問的網頁的詳細信息，從這個視圖當中我們可以得到以下信息：

　　1.載入頁面所消耗的時間 ：OnLoad Time[ms] 顯示從頁面開始載入到瀏覽器派發 onload 事件所經歷的時間;Total Load Time[ms] 顯示頁面全部 load 完總共消耗的時間

　　2.JavaScript 執行時間 ：On Client[ms] 通過 JS API 或庫執行的所有 JavaScript 函數所消耗的總時間

　　3.網絡請求花了多長時間： 從 Remark 中可看到總共有多少請求數，其中有多少 XHR 請求等信息

　　4.服務器端所消耗時間： On Server[ms] 指客戶端發出的所有請求在服務器過了多長時間開始響應所消耗的總時間

　　5.從右下方的各個面板中可以得到總體的性能分析報告(更詳細的信息可查看 Cockpit 面板中的相應節點)，例如：

　　1)NetWork 中可看出有多少資源是從瀏覽器緩存中讀取的，有多少的 HTTP 轉發請求消耗了不必要的網絡傳輸時間;合并同一個 domain 中的 CSS、JS 的請求可節省多長網絡傳輸時間。

　　2)TimeLine 中顯示了頁面的生命周期：該圖反映了頁面進程中網絡資源下載，JavaScript 執行，頁面發生渲染，CPU 使用情況，以及發生了哪些事件，例如：Load 事件、XMLHttpRequest 等信息。

　　在我的例子中，以下內容引起了我的注意：

　　1.網絡耗時較長，請求數目太多：總共有 896 網絡請求，其中有 300+ 個 request 是對圖片的請求，300+ 個是從 cache 中對相同圖片的讀取。

　　2.JavaScript 執行時間總耗時 22 秒： 從右下方的 JavaScript/Ajax(A) 報告中可看出有一個 OnLoad 的事件就消耗了總共 13 秒 的時間，雙擊可從右邊窗口看出它的前后調用棧信息。

　　3.Server 端處理總共花了 20 秒 的時間 : 這說明 Server 端也可能存在性能問題，可推薦大家使用 Performance Inspector工具去分析 Server 端的性能問題，這里不再詳述。

　　4.Remark 欄還顯示了頁面總共發出了 23 個 XMLHttpRequest 請求: 這可以從時間軸的 event 行中找出發生的時間點。下一節將會針對這些問題進行更詳細的討論。

　　Timeline( 時間軸視圖) - 頁面生命周期

　　時間軸視圖可以通過雙擊 Cockpit 面板中的 TimeLine 節點打開或者在 Performance Report 中通過在某個 URL 上點擊右鍵，選擇“DrillDown-TimeLine ”打開。根據 性能報告視圖 打開耗時比較長的 URL 的 TimeLine, 通過工具欄或右鍵菜單，可以打開更多選項，比如內容類型和 JavaScript 觸發器的顏色值，或者顯示更多事件，比如鼠標移動、點擊和鍵盤事件。打開本案例的時間軸視圖，如圖 7 所示：

　　圖 7. 時間軸

　　在此視圖下，我們可觀測到：

　　CPU 占用率可顯示 JavaScript 的執行導致瀏覽器占用 CPU 的時間

　　JavaScript 執行所占用的時間：從上圖中觀察到右邊藍色塊的那一段耗時比較長，鼠標懸停在這段上可以看到是由于 load event on 觸發的，耗時將近 13 秒 的時間

　　瀏覽器 Rendering，懸停上去可發現大部分是由于在計算 layout 所需要的時間，一般在 IE 上面執行相對會比較明顯

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