|
我討厭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 |
|
|
