前端性能分析工具——Timeline(一)

1.Timeline概覽

timeline是google的chrome瀏覽器中的一個開發者工具，它有助於前端開發者來分析頁面的解析、腳本運行以及渲染、佈局的狀況，從而幫助開發者去優化頁面的性能。

  

timeline有三個主要的模塊：頂部的概況視圖部分，記錄視圖部分和工具欄。
  

錄製按鈕(Record toggle)：點擊開始/中止一段頁面的錄製

清除按鈕(Clear recording)：點擊清楚按鈕能夠清除timeline上面的記錄

聚合異步事件模式按鈕(Glue async events toggle)：點擊之後讓你可以很容易的把異步事件和他們的調用者關聯起來

過濾記錄(Filter records by type)：經過勾選不一樣類型的記錄讓記錄面板呈現不一樣記錄

經過一次錄製，錄製的每個事件發生時都會被添加到錄製面板的「瀑布流」中。記錄會被歸類到四個基礎類型中：Loading、Scripting、Rendering和Painting，他們的顏色標識以下圖：

例如，下面錄製的是一個chrome加載的HTML頁面。第一條記錄(Send Request)是chrome發起的這個頁面的http請求，接下來是一個Receive Response record，一些 Receive Data records，而後是Finish Loading record。

此外，除了查看錄製詳細，你還能夠檢查下面三個模式的錄製：

Event模式經過事件分類展示全部錄製的事件

Frames模式展示頁面渲染的性能

Memory模式展示頁面內存使用狀況

1.1Event模式

事件模式提供全部錄製中捕獲的事件視圖，並進行歸類。在那裏，你可看見你的應用在什麼地方，什麼類型的任務上耗時最多。進度條的長度與事件完成花費的時間長短是一致的。

當你選擇某一時間範圍內的時間視圖時，記錄視圖也會只展現這一段時間內的記錄。

1.2Frames模式

Frames模式能夠監控你的應用的渲染性能。一個「frame」表明瀏覽器必須渲染一個單一的frame的內容展示出來——運行Javascript，監聽事件，更新DOM和改變樣式，從新佈局和繪製頁面。你的app的目標是運行60 frames/秒(FPS)，大多數的視頻展示刷新頻率都是60Hz的。所以，你的應用每個frame展示的事件大約是16.6ms。

貫穿frames視圖的水平線表明frame的比率目標是60fps和30fps。frame的高度與它渲染完成消耗的時間一致。填充frame的各類顏色表明每種類型的任務消耗時間所佔百分比。

1.3Memory模式

內存模式展示給你的是你的應用在應用運行時的內存狀況和document、DOM節點數、事件監聽數的計數。

內存模式不能準確的告訴你是什麼致使內存泄露，可是他能幫助你識別哪些事件可能致使內存泄露。