一但汞、縮略圖
1宿刮、FPS，表示每一秒的幀數(shù)私蕾，用來(lái)衡量頁(yè)面動(dòng)畫(huà)的性能指標(biāo)僵缺。fps圖中綠色柱狀越高表示體驗(yàn)越好。若出現(xiàn)紅色長(zhǎng)條則表示在該時(shí)間端出現(xiàn)長(zhǎng)幀踩叭，可能影響用戶體驗(yàn)磕潮。（目前大多數(shù)設(shè)備的屏幕刷新率為?60 次/秒）
2翠胰、CPU，表示cpu的使用情況自脯，其中顏色含義和底下的Summary模塊中相同之景。從該行中顏色塊的跨越時(shí)長(zhǎng)可以分析哪類事件消耗的時(shí)間較長(zhǎng)，從而找到性能瓶頸膏潮。
3锻狗、NET，每一個(gè)顏色條表示加載一種文件焕参。藍(lán)色表示html文件屋谭、黃色表示js文件、紫色表示樣式文件龟糕、綠色表示媒體文件、灰色表示其他資源悔耘。
4讲岁、screenshots，對(duì)應(yīng)每一時(shí)刻頁(yè)面的顯示情況衬以。
5缓艳、HEAP，表示堆內(nèi)存使用情況看峻。
二阶淘、詳細(xì)
1、在Frames圖表中互妓，把鼠標(biāo)移動(dòng)到綠色條狀圖上溪窒，Devtools會(huì)展示這個(gè)幀的FPS
2、展開(kāi)Main圖表冯勉，Devtools展示了主線程運(yùn)行狀況澈蚌。X軸代表著時(shí)間。每個(gè)長(zhǎng)條代表著一個(gè)event灼狰。長(zhǎng)條越長(zhǎng)就代表這個(gè)event花費(fèi)的時(shí)間越長(zhǎng)宛瞄。Y軸代表了調(diào)用棧（call stack）。在棧里交胚，上面的event調(diào)用了下面的event份汗。
3、raster(光柵化）頁(yè)面元素繪制成位圖（?paint?）
4蝴簇、GPU??繪制位圖到屏幕上
三杯活、summary
對(duì)應(yīng)了縮略圖中 cpu 使用
參考：
https://juejin.im/post/5a5ec3a8518825545d75ccef
https://www.jishuwen.com/d/20Qe
