原文http://www.th7.cn/web/html-css/201406/42043.shtml
Timeline工具欄提供了對於在裝載你的Web應用的過程中，時間花費情況的概覽，這些應用包括處理DOM事件, 頁面布局渲染或者向屏幕繪制元素。
Timeline可以通過事件，框架，和實時內存用量3個方面的數據來監測網頁，通過這些數據，我們可以方便的找出頁面中存在問題的地方。
Timeline面板
打開chrome開發者工具，切換到Timeline選項卡，界面如下：
強烈建議在瀏覽器隱身模式下使用這個工具，並且禁用一切無關的插件，因為這些插件會影響測試的結果。
工具默認是不開啟記錄的，如果要分析頁面，請點擊圓形的記錄按鈕，按鈕變紅后就可以開始記錄頁面的各個事件了，這個時候可以在頁面上做各種操作，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 基本能分析出頁面的渲染性能。這在移動端非常有用。
