六、開發(fā)者工具的Timeline面板

六、開發(fā)者工具的Timeline面板

Chrome瀏覽器開發(fā)者工具的Timeline面板，是查看"刷新率"的最佳工具。這一節(jié)介紹如何使用這個工具。

首先，按下 F12 打開"開發(fā)者工具"，切換到Timeline面板。

左上角有一個灰色的圓點，這是錄制按鈕，按下它會變成紅色。然后，在網(wǎng)頁上進行一些操作，再按一次按鈕完成錄制。

Timeline面板提供兩種查看方式：橫條的是"事件模式"（Event Mode），顯示重新渲染的各種事件所耗費的時間；豎條的是"幀模式"（Frame Mode），顯示每一幀的時間耗費在哪里。

先看"事件模式"，你可以從中判斷，性能問題發(fā)生在哪個環(huán)節(jié)，是JavaScript的執(zhí)行，還是渲染？

不同的顏色表示不同的事件。

• 藍色：網(wǎng)絡通信和HTML解析
• 黃色：JavaScript執(zhí)行
• 紫色：樣式計算和布局，即重排
• 綠色：重繪

哪種色塊比較多，就說明性能耗費在那里。色塊越長，問題越大。

幀模式（Frames mode）用來查看單個幀的耗時情況。每幀的色柱高度越低越好，表示耗時少。

你可以看到，幀模式有兩條水平的參考線。

下面的一條是60FPS，低于這條線，可以達到每秒60幀；上面的一條是30FPS，低于這條線，可以達到每秒30次渲染。如果色柱都超過30FPS，這個網(wǎng)頁就有性能問題了。

此外，還可以查看某個區(qū)間的耗時情況。

或者點擊每一幀，查看該幀的時間構(gòu)成。