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

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

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

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

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

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

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

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

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

哪種色塊比較多，就說(shuō)明性能耗費(fèi)在那里。色塊越長(zhǎng)，問(wèn)題越大。

幀模式（Frames mode）用來(lái)查看單個(gè)幀的耗時(shí)情況。每幀的色柱高度越低越好，表示耗時(shí)少。

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

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

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

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