Chrome渲染分析之Timeline工具的使用

概述

這個工具真的很強大，Timeline工具欄提供了對於在裝載你的Web應用的過程當中，時間花費狀況的概覽，這些應用包括處理DOM事件, 頁面佈局渲染或者向屏幕繪製元素。Timeline能夠經過事件，框架，和實時內存用量3個方面的數據來監測網頁，經過這些數據，咱們能夠方便的找出頁面中存在問題的地方。

Timeline面板

打開chrome開發者工具，切換到Timeline選項卡，界面以下：

功能不少，很是複雜是否是，對應E問很差的同窗，真的是無從下手，幸虧有翻譯工具，下面咱們一步一步的揭開這個工具的神祕面紗。

強烈建議在瀏覽器隱身模式下使用這個工具，而且禁用一切無關的插件，由於這些插件會影響測試的結果。

工具默認是不開啓記錄的，若是要分析頁面，請點擊圓形的記錄按鈕，按鈕變紅後就能夠開始記錄頁面的各個事件了，這個時候能夠在頁面上作各類操做，Timeline工具會詳細的記錄下各種事件。建議不要記錄過久，太多會增長分析的難度。

顏色的屬性

Timeline工具裏面使用是4種顏色來表示不一樣類別的事件：

藍色：加載；
黃色：腳本；
紫色：渲染；
綠色：繪製

過濾

過濾面板能夠對不一樣類型的事件和花費時間進行過濾，很是好用：

事件模式

在這個模式中，Summary視圖(在Timeline的頂部)顯示了一些水平的柵欄，分別表明頁面中的網絡和HTML解析(藍色)，JavaScript(黃色)，渲染(紫色)以及繪製(綠色)事件。重繪是瀏覽器事件，是爲響應諸如窗口大小改變或者滾動之類的視覺變化而調用的。

咱們能夠在最上面灰色的時間節點哪裏拖動來選擇查看的記錄範圍，以下圖：

在DETAILS面板中能夠查看該記錄範圍內各種型事件的時間開銷：

other表示其它事件花費的時間，Idle表示空閒時間，也能夠在DETAILS面板中查看單個記錄的時間開銷，以下：

名詞解釋：

send request	發送請求	evaluate script	評估腳本	parse html	解析html	recalculate style	從新計算顯示樣式
layout	計算佈局	paint setup	繪製設置【準備繪製】	paint	繪製	composite layers	組合層
timer fired	觸發定時器	function call	函數調用	receive data	接收數據	receive response	接收響應
finish loading	結束加載	GC event	瀏覽器垃圾回收	pevaluate script	評估腳本	rasterize	光柵化

幀模式

幀模式能讓咱們深刻的瞭解頁面的渲染性能，「幀」表示瀏覽器要呈現的內容顯示到單個幀所必須作的工做，如運行 JavaScript、 處理事件、 更新 DOM 和更改的樣式、 佈局和繪製。

目前大多數的顯示器的刷新頻率是60Hz，那麼咱們頁面的繪製頻率能達到60幀每秒是最好的，由於軟件幀和硬件的刷新頻率一致的話，頁面能給人很是流暢的感受，不然就會感受到很卡，這樣咱們大概有16.6ms（1000/60）來完成每一幀的呈現，這就是不少人說的「16.6ms」優化。

灰色的區域有點難理解，你能夠理解是瀏覽器內部c++的一些工做，這部分可能和前端的js以及渲染沒什麼關係。【陳子舜】

選擇一個幀範圍能夠查看這個範圍內幀的一些數據，以下：

內存模式

內存視圖會經過一個圖表顯示您的頁面隨着時間的推移所使用的內存，你能夠查看每一個時間段的內存使用量，並找出性能問題。

結束語

PS：本文來自huihuixiao發表在部門博客的內容，以爲很是有價值故轉載出來，在此感謝huihui的辛苦付出！

經過Timeline來觀察頁面的渲染變化，有利於分析頁面的性能瓶頸。timeline是個很是不錯的工具，下一次將講解」Rendering」的用法，經過timeline + Rendering 基本能分析出頁面的渲染性能。這在移動端很是有用。