## 六、開發者工具的Timeline面板
Chrome瀏覽器開發者工具的Timeline面板，是查看"刷新率"的最佳工具。這一節介紹如何使用這個工具。
首先，按下 F12 打開"開發者工具"，切換到Timeline面板。
左上角有一個灰色的圓點，這是錄制按鈕，按下它會變成紅色。然后，在網頁上進行一些操作，再按一次按鈕完成錄制。
Timeline面板提供兩種查看方式：橫條的是"事件模式"（Event Mode），顯示重新渲染的各種事件所耗費的時間；豎條的是"幀模式"（Frame Mode），顯示每一幀的時間耗費在哪里。
先看"事件模式"，你可以從中判斷，性能問題發生在哪個環節，是JavaScript的執行，還是渲染？
不同的顏色表示不同的事件。
> * 藍色：網絡通信和HTML解析
> * 黃色：JavaScript執行
> * 紫色：樣式計算和布局，即重排
> * 綠色：重繪
哪種色塊比較多，就說明性能耗費在那里。色塊越長，問題越大。
幀模式（Frames mode）用來查看單個幀的耗時情況。每幀的色柱高度越低越好，表示耗時少。
你可以看到，幀模式有兩條水平的參考線。
下面的一條是60FPS，低于這條線，可以達到每秒60幀；上面的一條是30FPS，低于這條線，可以達到每秒30次渲染。如果色柱都超過30FPS，這個網頁就有性能問題了。
此外，還可以查看某個區間的耗時情況。
或者點擊每一幀，查看該幀的時間構成。
