Chorme Timeline
Overview
Chorme版本53.0.2785.116 (64-bit)
FPS
記錄FPS變化信息蛋铆，通常設(shè)備的屏幕的刷新頻率是60FPS。當(dāng)FPS過大時(shí)级乍，會(huì)顯示紅色的長(zhǎng)條优质，代表有個(gè)長(zhǎng)幀竣贪。
CPU
瀏覽器內(nèi)核的運(yùn)行情況。藍(lán)色表示對(duì)html操作所占的內(nèi)存巩螃，黃色的表示對(duì)js的操作所占內(nèi)存贾富，紫色表示對(duì)css操作所占的內(nèi)存，灰色表示其他操作所占的內(nèi)存
NET
網(wǎng)絡(luò)資源請(qǐng)求信息牺六。藍(lán)色為html文件，黃色為script文件汗捡，紫色為css文件淑际，綠色為媒體文件，灰色為其他文件
火焰圖
所謂的火焰圖扇住，就是JavaScript堆棧調(diào)用信息春缕，顯示每一個(gè)JavaScript函數(shù)。從下圖可以看出艘蹋，CPU的內(nèi)容與火焰圖內(nèi)容相對(duì)應(yīng)锄贼，是對(duì)CPU內(nèi)容的詳細(xì)展示
網(wǎng)絡(luò)請(qǐng)求
如若勾選了network，中間多了一行網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)面板女阀，可通過鼠標(biāo)懸浮network面板上的條狀來查看沒個(gè)資源的請(qǐng)求情況
細(xì)節(jié)展示
Summary
當(dāng)你在火焰圖選擇一個(gè)事件宅荤，Summary中顯示了關(guān)于事件的附加信息。
Bottom-Up
根據(jù)事件耗時(shí)長(zhǎng)短浸策，反向列出事件列表冯键，有分類可選(通過類型、域庸汗、子域惫确、URL分類列出)，面板右邊也有詳細(xì)介紹蚯舱，不過基本和左邊相似改化，就不多介紹了。
Call Tree
可在樹形圖中查看各項(xiàng)事件的子項(xiàng)信息枉昏，及各子項(xiàng)的信息,同樣也有分組篩選陈肛，規(guī)則同上，面板右邊同上
和bottom-up基本相同凶掰，不同的是事件調(diào)用跟蹤信息更詳細(xì)的列在了樹形圖上燥爷，而同一個(gè)事件在bottom-up里的要簡(jiǎn)化了很多蜈亩。
點(diǎn)擊跳轉(zhuǎn)到j(luò)s文件，可以看到這個(gè)函數(shù)執(zhí)行用了多少時(shí)間
甚至直接幫你跳轉(zhuǎn)到覺得會(huì)影響性能的那行代碼
Event Log
明確列出各項(xiàng)事件的詳細(xì)信息前翎，可以進(jìn)行關(guān)鍵字篩選稚配，所耗時(shí)間篩選，事件類型篩選等港华，右邊是詳細(xì)信息道川，可看到函數(shù)調(diào)用棧的跟蹤信息。
?Layers
如何讓layer面板顯示
1立宜、選擇想要的時(shí)間區(qū)段
2冒萄、點(diǎn)擊長(zhǎng)幀
3、layers面板
Paint Profiler
如何顯示Paint Profiler面板
1橙数、在控制工具面板中啟用Paint功能
2尊流、Layers面板最右側(cè)有Paint Profiler選項(xiàng)
最左邊面板的文字描述，只是給列出了選中區(qū)域的繪制事件列表及繪制信息灯帮，可點(diǎn)開看詳細(xì)內(nèi)容崖技，比如有textsize、left钟哥、top等屬性
渲染設(shè)置
如何顯示Rendering面板
1迎献、打開Devtools主菜單
2、選擇More tools > Rendering settings
3腻贰、Rendering settings會(huì)緊挨著Console抽屜面板打開
如上圖吁恍，勾選了Paint Flashing 之后返回頁面，再用鼠標(biāo)去劃過頁面播演，高亮顯示的地方冀瓦，就是頁面需要重繪的地方
