使用 chrome-devtools Performance 面板
時(shí)間：2023-07-20 22:21:02 | 來源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-07-20 22:21:02 來源：網(wǎng)站運(yùn)營(yíng)
使用 chrome-devtools Performance 面板：Chrome dev-tools 系列文章：
QAQ-YS：使用 chrome-devtools Console 面板
QAQ-YS：使用 chrome-devtools Elements 面板
QAQ-YS：使用 chrome-devtools Sources 面板
QAQ-YS：使用 chrome-devtools Network 面板
QAQ-YS：使用 chrome-devtools Performance 面板
QAQ-YS：使用 chrome-devtools Memory 面板
QAQ-YS：使用 chrome-devtools Application 面板
這玩意以前叫Timeline... 不過功能是一樣的，小部分細(xì)節(jié)做了規(guī)范整理。
之前有說到Element，Console，Sources大多運(yùn)用于debug，Network可用于debug和查看性能，今天的主角Timeline(現(xiàn)已更名Performance)更多的是用在性能優(yōu)化方面，它的作用就是記錄與分析應(yīng)用程序運(yùn)行過程中所產(chǎn)生的活動(dòng)。
Performance首先，看下這個(gè)面板長(zhǎng)什么樣，再依次介紹面板有的功能...
設(shè)置(最右上角的)因?yàn)橥洏?biāo)明它了，就先介紹吧。設(shè)置項(xiàng)有：
- Disable JavaScript samples(不允許采樣)
- Network(網(wǎng)絡(luò)限制)
- Enable advanced paint insstrumentation(slow)(記錄渲染信息，會(huì)產(chǎn)生一定的性能損耗，記錄后可以再paint profile面板查看)
- CPU(CPU限制)
記錄按鈕是否需要對(duì)當(dāng)前頁面的運(yùn)行進(jìn)行記錄，當(dāng)打開記錄按鈕開始執(zhí)行記錄過程的時(shí)候，該按鈕顯示紅色
刷新按鈕重新啟動(dòng)記錄
清除按鈕按下后會(huì)清除之前的記錄信息，瞬間白板
記錄列表就是每次記錄數(shù)據(jù)的列表
內(nèi)存使用信息當(dāng)打開狀態(tài)時(shí)，記錄在記錄過程中如js堆內(nèi)存、Node節(jié)點(diǎn)數(shù)等數(shù)據(jù)的記憶線
如下圖，在該記憶線上移動(dòng)鼠標(biāo)，會(huì)在圖的下面出現(xiàn)對(duì)應(yīng)時(shí)間點(diǎn)時(shí)的各項(xiàng)指標(biāo)數(shù)據(jù)
heap記憶線錄制截屏和截屏列表和Network的捕獲截屏是一樣的，會(huì)產(chǎn)生一定的性能損耗。
垃圾回收針對(duì)記錄過程所產(chǎn)生的垃圾進(jìn)行回收，釋放瀏覽器內(nèi)存
FPS信息頁面活動(dòng)時(shí)的FPS變化信息，通常設(shè)備的屏幕的刷新頻率是60FPS，超過的話，則有可能產(chǎn)生卡頓現(xiàn)象，可參考這篇(需翻墻)
效果如下圖，有兩個(gè)地方可以顯示FPS信息，當(dāng)FPS過大時(shí)，會(huì)顯示紅色的長(zhǎng)條，代表有個(gè)長(zhǎng)幀。我們也可以觀察到，上下兩個(gè)區(qū)域的分紅條狀出現(xiàn)的時(shí)間點(diǎn)和持續(xù)的時(shí)間段是同步的。
CPU信息記錄瀏覽器內(nèi)核的運(yùn)行情況,以曲線區(qū)域圖的形式展示。黃色的表示對(duì)js的操作所占內(nèi)存(js代碼評(píng)估及函數(shù)調(diào)用)，藍(lán)色表示對(duì)html操作所占的內(nèi)存(主要是html編譯)，紫色表示對(duì)css操作所占的內(nèi)存(css樣式計(jì)算等)，灰色表示其他操作所占的內(nèi)存
展示效果如下圖所示：
網(wǎng)絡(luò)請(qǐng)求信息網(wǎng)絡(luò)資源請(qǐng)求信息，以不同顏色的條狀表示不同的資源。黃色表示是script文件，藍(lán)色表示是html文件，紫色表示是css文件，綠色表示是媒體文件，灰色表示各種其他文件~
效果如圖:
推薦將
http://FPS.CPU.NET合起來看，如下：
函數(shù)瀑布圖各種事件的信息大集合，24K鈦合金狗眼已閃瞎，第一行代表隨著時(shí)間推移而發(fā)生的事件，下面各行是第一行事件的子項(xiàng)，由下面的各項(xiàng)組成第一行的整體事件。瀑布圖的信息與CPU使用情況相符合，可從下圖中看出
具體效果如圖所示(為方便查看，這里截取一段時(shí)間內(nèi)的事件瀑布圖)
當(dāng)記錄一個(gè)網(wǎng)站加載過程時(shí)，在事件瀑布面板會(huì)有三條虛線，綠色的表示第一次開始繪制頁面，藍(lán)色線代表DOM已加載完成，紅色線表示頁面加載完(包括資源引用)
效果圖：
summary(信息匯總） & 細(xì)節(jié)展示該區(qū)域主要展示所選內(nèi)容的信息匯總和各項(xiàng)細(xì)節(jié)信息
我們可以先在時(shí)間軸上選取一段區(qū)域，看看有些什么：
然后在事件瀑布圖中選中一個(gè)事件看看：
可以看出，該匯總會(huì)將選中目標(biāo)的內(nèi)容大致信息展示出來。
bottom-up根據(jù)事件耗時(shí)長(zhǎng)短，反向列出事件列表，有分類可選(通過類型、域、子域、URL分類列出)，面板右邊也有詳細(xì)介紹，不過基本和左邊相似，就不多介紹了。
效果圖如下：
可以看出耗時(shí)最長(zhǎng)的是html編譯及其所花費(fèi)的時(shí)間，其次是一個(gè)XHR請(qǐng)求...在這個(gè)面板的左上角還有分組篩選，將列表數(shù)據(jù)分別以activity、category、domain、subdomain、url歸類到一起。
call-tree(事件調(diào)用的樹形圖)可在樹形圖中查看各項(xiàng)事件的子項(xiàng)信息，及各子項(xiàng)的信息,同樣也有分組篩選，規(guī)則同上，面板右邊同上
效果如圖所示(和bottom-up基本相同，不同的是事件調(diào)用跟蹤信息更詳細(xì)的列在了樹形圖上)：
而同一個(gè)事件在bottom-up里是這樣的，簡(jiǎn)化了很多：
event-log(事件日志)明確列出各項(xiàng)事件的詳細(xì)信息，可以進(jìn)行關(guān)鍵字篩選，所耗時(shí)間篩選，事件類型篩選等，右邊是詳細(xì)信息，可看到函數(shù)調(diào)用棧的跟蹤信息。
效果如圖所示：
layers展示刷新到某幀時(shí)的頁面，可讓開發(fā)者明確頁面每一幀的渲染情況
注意：在paint選擇框勾選的情況下可用
面板召喚過程：
- 選擇所選區(qū)塊
- 選擇長(zhǎng)幀，出現(xiàn)layers面板
- 在layers面板浪起來
可以看到頁面在這個(gè)長(zhǎng)幀階段后的繪制情況，旋轉(zhuǎn)可看層級(jí)立體圖，右側(cè)也有列出當(dāng)前幀的詳細(xì)信息，如size大小、為啥要合并(什么是合并？看這篇
文章)、內(nèi)存評(píng)估等
paint profiler描述頁面的繪制過程的記錄
注意：在paint選擇框勾選的情況下可用。
面板召喚過程：
- 選擇一個(gè)paint事件，出現(xiàn)paint profiler面板
- 在paint profiler面板浪起來
繪制過程中可以選擇一段區(qū)域，看這段區(qū)域內(nèi)的頁面繪制結(jié)果是什么樣的，比如，在這個(gè)列表中，首先是導(dǎo)航的繪制，然后是右側(cè)文章內(nèi)容，然后是左側(cè)幾個(gè)小窗div的繪制。文字描述，相對(duì)圖形來說的，只是給列出了選中區(qū)域的繪制事件列表及繪制信息，可點(diǎn)開看詳細(xì)內(nèi)容，比如有textsize、left、top等屬性。
Performance面板內(nèi)容是真的多，還有很多細(xì)節(jié)性的功能可以在使用過程中慢慢體會(huì)，做性能分析的時(shí)候用起來還是很順手的。
本文未記錄的內(nèi)容還有:
- 柵格記錄(涉及渲染內(nèi)容)
- GPU使用記錄
- Chrome的IO子線程使用記錄
- 排版任務(wù)記錄
- 線程池工作記錄
- 等等還有很多，具體細(xì)節(jié)自行探索(也可以一起討論)...
完結(jié)，撒花.
在線咨詢