IE11開發人員工具：UI響應工具詳解

　　我討厭debug，相信也沒多少開發者會喜歡。但是當程式碼出錯之後肯定是要找出問題出在哪裡的。不過網頁開發的時候遇到BUG是一件再正常不過的事情了，我們不能保證自己的程式碼萬無一失，於是使用瀏覽器的開發人員工具除錯是我們解決問題最快捷的方法了。微軟在Windows 8.1預覽版中帶來了全新的IE11瀏覽器，不光加入了諸如WebGL支援等功能，還將F12開發人員工具進行了重新設計，這是IE有史以來開發人員工具最大的更新。

　　新的開發人員工具更加實用和高效了，今天將為大家介紹其中的一項新增功能：UI響應工具。這個功能相信對於不少人來說還是陌生的，但是這個功能卻相當的實用。

　　UI響應工具的作用

　　UI響應工具顧名思義就是檢視UI響應時間的工具，通過這個工具可以幫助我們確定應用中的哪些元件佔用了多少CPU時間，讓我們之後可以更有針對性的進行優化，從而最大限度地改善應用效能，同時提高開發的效率。

　　IE11中的UI響應工具用直觀的視覺化的形式顯示HTML、CSS和JavaScript的執行情況以及對佈局和垃圾回收等方面的影響，樹狀圖表示了每個時間點對CPU的佔用率，下方的圖形則展示了頁面的FPS，也就是每秒鐘的幀數，這是我們判斷頁面丟不丟幀最直觀的方法，也就是看頁面“卡不卡”。你可以從統計資料中準確瞭解應用的響應性以及呈現的流暢度，從而識別出影響應用效能的具體因素，更加有針對性地對應用進行優化。而下方還有詳細的時間使用情況，這些只要我們開啟UI響應工具再載入頁面IE11就會幫我們自動收集完成。

　　開始使用UI響應工具(CTRL + 5)

　　下面我們開始具體的使用UI響應工具來測試一下。如果你的網站上出現了過多的動畫或使用者介面元素的導致響應速度很慢，就會減少使用者的體驗，這個時候就可以通過UI響應工具來進行優化。

　　首先開啟網頁之後F12啟用開發人員工具，在點選UI響應工具的按鈕開始一個檢測，等待頁面載入完畢之後停止。展現在你面前的將是一個根據網站載入情況生成的彩色柱形圖，按時間的推移呈現出跌宕起伏的變化。

　　時間軸上顯示了7 個主要的事件類別。分別是Loading載入時間、Scripting指令碼執行、GC垃圾回收、Styling樣式載入、Rendering渲染、Image decoding圖片解碼和Other其他事件。選定上面某個時間段後，此時間段載入的包含、引導、載入網頁相關資源就會分解出現在時間線詳細資訊區塊。

　　載入包含與引導和載入網頁資源相關的事件。在載入內收集的事件有：CSS 分析、 HTML 分析、HTTP 請求、推理下載。

　　指令碼包含與之相關的處理和執行的JavaScript事件。在載入內收集的事件有：動畫回撥、DOM事件、指令碼計算、計時器。

　　GC，垃圾回收時，從記憶體識別和消除他們不再需要的專案。

　　樣式包含CSS樣式和元素定位到相關的事件。在樣式內收集的事件有：佈局、樣式計算。

　　呈現包含有關將元素放在螢幕上的事件。在呈現內收集的事件有：渲染、影象解碼。

　　其他：雜項與瀏覽器有關計算。

　　時間線詳細資訊區塊支援開始時間 、持續時間兩種方式來顯示，可以根據開發情況調整顯示方式。

　　UI響應能力工具可以幫助您瞭解哪些元件佔用了CPU時間，從而幫助您最大限度地改善應用效能。該工具以視覺化形式顯示HTML、CSS和JavaScript的執行情況以及對佈局和垃圾回收等方面的重要邊際影響，幫助您深入瞭解IE的內部工作情況。您可以高屋建瓴地準確瞭解您的應用的響應性以及呈現的流暢性。從而識別出影響應用效能的具體原因，更加有針對性地對應用進行優化。

　　熟練的運用UI響應工具可以幫助我們快速瞭解網頁載入響應時間，而它注意的是佔用CPU的時間，如果想要知道網頁載入佔用記憶體的量我們就需要使用記憶體分析工具來檢視了。

　　來自：ieFans.Net