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

　　新的開發(fā)人員工具更加實用和高效了，今天將為大家介紹其中的一項新增功能：UI響應工具。這個功能相信對于不少人來說還是陌生的，但是這個功能卻相當?shù)膶嵱谩?/p>

　　UI響應工具的作用

　　UI響應工具顧名思義就是查看UI響應時間的工具，通過這個工具可以幫助我們確定應用中的哪些組件占用了多少CPU時間，讓我們之后可以更有針對性的進行優(yōu)化，從而最大限度地改善應用性能，同時提高開發(fā)的效率。

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

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

　　下面我們開始具體的使用UI響應工具來測試一下。如果你的網(wǎng)站上出現(xiàn)了過多的動畫或用戶界面元素的導致響應速度很慢，就會減少用戶的體驗，這個時候就可以通過UI響應工具來進行優(yōu)化。

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

　　時間軸上顯示了7 個主要的事件類別。分別是Loading加載時間、Scripting腳本運行、GC垃圾回收、Styling樣式加載、Rendering渲染、Image decoding圖片解碼和Other其他事件。選定上面某個時間段后，此時間段加載的包含、引導、加載網(wǎng)頁相關資源就會分解出現(xiàn)在時間線詳細信息區(qū)塊。

　　加載包含與引導和加載網(wǎng)頁資源相關的事件。在加載內(nèi)收集的事件有：CSS 分析、 HTML 分析、HTTP 請求、推理下載。

　　腳本包含與之相關的處理和執(zhí)行的JavaScript事件。在加載內(nèi)收集的事件有：動畫回調、DOM事件、腳本計算、計時器。

　　GC，垃圾回收時，從內(nèi)存識別和消除他們不再需要的項目。

　　樣式包含CSS樣式和元素定位到相關的事件。在樣式內(nèi)收集的事件有：布局、樣式計算。

　　呈現(xiàn)包含有關將元素放在屏幕上的事件。在呈現(xiàn)內(nèi)收集的事件有：渲染、圖像解碼。

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

　　時間線詳細信息區(qū)塊支持開始時間 、持續(xù)時間兩種方式來顯示，可以根據(jù)開發(fā)情況調整顯示方式。

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

　　熟練的運用UI響應工具可以幫助我們快速了解網(wǎng)頁加載響應時間，而它注意的是占用CPU的時間，如果想要知道網(wǎng)頁加載占用內(nèi)存的量我們就需要使用內(nèi)存分析工具來查看了。

　　來自：ieFans.Net