Timeline面板

Timeline面板是整個(gè)面板里面最復(fù)雜的一個(gè)面板，涉及的東西比較多?？梢岳眠@個(gè)面板來(lái)記錄和分析網(wǎng)頁(yè)運(yùn)行過(guò)程中的所有活動(dòng)行為信息。
你可以充分利用這個(gè)面板來(lái)分析你的網(wǎng)頁(yè)的程序性能問(wèn)題。

概述

下圖是從Google官方網(wǎng)站中介紹Timeline面板的圖貼到這里，該面板主要包括4大塊窗格(Pane)：

  1. Controls 錄制開(kāi)關(guān)和控制錄制過(guò)程中需要記錄哪些信息。
  2. Overview 網(wǎng)頁(yè)性能的概要信息。
  3. Flame Chart CPU堆棧軌跡的可視化圖表(火焰圖)。在圖表里面有1到3條虛豎線。
  4. Details 當(dāng)選擇一個(gè)指定的事件后，會(huì)顯示這個(gè)事件的更多信息；當(dāng)沒(méi)有選擇事件時(shí)，會(huì)顯示指定的時(shí)間幀信息。

Flame Chart里面的虛豎線含義：藍(lán)色標(biāo)記DOMContentLoaded事件；綠色標(biāo)記第一次的繪制時(shí)間點(diǎn)；紅色代表load事件。