摘要：分析每一秒的幀是用來分析動(dòng)畫的一個(gè)主要性能指標(biāo)。軸代表了調(diào)用棧。在事件長條的右上角出，如果出現(xiàn)了紅色小三角，說明這個(gè)事件是存在問題的，需要特別注意。雙擊這個(gè)帶有紅色小三角的的事件。

運(yùn)行時(shí)性能表現(xiàn)（runtime performance）指的是當(dāng)你的頁面在瀏覽器運(yùn)行時(shí)的性能表現(xiàn)，而不是在下載頁面的時(shí)候的表現(xiàn)。這篇指南將會(huì)告訴你怎么用Chrome DevTools Performance功能去分析運(yùn)行時(shí)性能表現(xiàn)。在RAIL性能評(píng)估模型下，你可以在這篇指南中可以學(xué)到怎么去用這個(gè)performance功能去分析Response, Animation, 以及 Idle 這三個(gè)性能指標(biāo)。

在這篇指南中，我們會(huì)用Performance工具去分析一個(gè)現(xiàn)有的在線DEMO，然后教會(huì)你怎么去分析，從而找到性能瓶頸。

打開Chrome的匿名模式。匿名模式可以保證Chrome在一個(gè)相對(duì)干凈的環(huán)境下運(yùn)行。比如說，你安裝了許多chrome插件，這些插件可能會(huì)影響我們分析性能表現(xiàn)。

在匿名模式下打開右邊這個(gè)鏈接，DEMO，這個(gè)網(wǎng)頁就是我們要用來分析的DEMO。這個(gè)頁面里都是很多上下移動(dòng)的藍(lán)色小方塊。

按下Command+Opiton+I（Mac）或者Control+shift+I (Windows, Linux) 來打開Devtools

移動(dòng)設(shè)備的CPU一般比臺(tái)式機(jī)和筆記本弱很多。當(dāng)你想分析頁面的時(shí)候，可以用CPU控制器（CPU Throttling）來模擬移動(dòng)端設(shè)備CPU。

在DevTools中，點(diǎn)擊 Performance 的 tab。

確保 Screenshots checkbox 被選中

點(diǎn)擊 Capture Settings（??）按鈕，DevTools會(huì)展示很多設(shè)置，來模擬各種狀況

對(duì)于模擬CPU，選擇2x slowdown，于是Devtools就開始模擬兩倍低速CPU

為了使得這個(gè)DEMO有相對(duì)統(tǒng)一的運(yùn)行表現(xiàn)（不同的讀者，機(jī)器的性能千差萬別）。這個(gè)DEMO提供了自定義功能，用來確保這個(gè)DEMO的統(tǒng)一表現(xiàn)。

一直點(diǎn)擊 Add 10 這個(gè)按鈕直到你能很明顯看到藍(lán)色小方塊移動(dòng)變慢，在性能比較好的機(jī)器上，大概要點(diǎn)擊20次左右。

點(diǎn)擊 Optimize按鈕，你會(huì)發(fā)現(xiàn)藍(lán)色小方塊會(huì)變的很快而且動(dòng)畫變得平滑。

點(diǎn)擊 un-optimize 按鈕，藍(lán)色小方塊又會(huì)變成之前的模樣。

在之前的DEMO中，當(dāng)你運(yùn)行優(yōu)化模式的時(shí)候，藍(lán)色小方塊移動(dòng)地非常快。為什么呢？明明兩個(gè)模式都是移動(dòng)了同樣數(shù)量的小方塊而且移動(dòng)的時(shí)間也一樣。那么現(xiàn)在我們?cè)赑erformance界面下錄制下發(fā)生的一切，并且學(xué)習(xí)如何分析這個(gè)記錄，從而找到非優(yōu)化模式下的性能瓶頸。

在DevTools中，點(diǎn)擊 Record 。這時(shí)候Devtools就開始錄制各種性能指標(biāo)

等待幾分鐘

點(diǎn)擊Stop按鈕，Devtools停止錄制，處理數(shù)據(jù)，然后顯示性能報(bào)告

wow，看起來有非常多的數(shù)據(jù)，別害怕，我們一個(gè)一個(gè)來介紹

一旦你得到了頁面的性能表現(xiàn)報(bào)告，那么就可以用它來分析頁面的性能，從而找到性能瓶頸。

FPS（frames per second）是用來分析動(dòng)畫的一個(gè)主要性能指標(biāo)。能保持在60的FPS的話，那么用戶體驗(yàn)就是不錯(cuò)的。

觀察FPS圖表，如果你發(fā)現(xiàn)了一個(gè)紅色的長條，那么就說明這些幀存在嚴(yán)重問題，有可能導(dǎo)致非常差的用戶體驗(yàn)。一般來說，綠色的長條越高，說明FPS越高，用戶體驗(yàn)越好。

就在FPS圖表下方，你會(huì)看到CPU圖表。在CPU圖表中的各種顏色與Summary面板里的顏色是相互對(duì)應(yīng)的，Summary面板就在Performance面板的下方。CPU圖表中的各種顏色代表著在這個(gè)時(shí)間段內(nèi)，CPU在各種處理上所花費(fèi)的時(shí)間。如果你看到了某個(gè)處理占用了大量的時(shí)間，那么這可能就是一個(gè)可以找到性能瓶頸的線索。

把鼠標(biāo)移動(dòng)到FPS，CPU或者NET圖表之上，DevToos就會(huì)展示這個(gè)時(shí)間點(diǎn)界面的截圖。左右移動(dòng)鼠標(biāo)，可以重發(fā)當(dāng)時(shí)的屏幕錄像。這被稱為scrubbing, 他可以用來分析動(dòng)畫的各個(gè)細(xì)節(jié)。

在Frames圖表中，把鼠標(biāo)移動(dòng)到綠色條狀圖上，Devtools會(huì)展示這個(gè)幀的FPS。每個(gè)幀可能都在60以下，都沒有達(dá)到60的標(biāo)準(zhǔn)。

當(dāng)然這個(gè)對(duì)于DEMO，可以相當(dāng)容易觀察到性能的問題。但是在現(xiàn)實(shí)使用場(chǎng)景下，就不是那么容易觀察到了。所以要把常常使用這些工具來分析頁面。

小功能：顯示實(shí)時(shí)FPS面板

另外一個(gè)好用的小工具就是實(shí)時(shí)FPS面板，它可以實(shí)時(shí)展示頁面的FPS指標(biāo)

按下 Command+Shift+P（Mac）或者 Control+Shift+P(Windows, Linux) 打開命令菜單

輸入Rendering，點(diǎn)選Show Rendering

在Rendering面板里，激活FPS Meter。FPS實(shí)時(shí)面板就出現(xiàn)在頁面的右上方。

關(guān)閉FPS Meter只要按下Escape就可以了。這篇指南里暫時(shí)用不上這個(gè)功能。

現(xiàn)在已經(jīng)確定到這個(gè)頁面的動(dòng)畫性能表現(xiàn)不太好，那么下一步就是找到為什么

注意Summary面板，你會(huì)發(fā)現(xiàn)CPU花費(fèi)了大量的時(shí)間在rendering上。因?yàn)樘岣咝阅芫褪且婚T做減法的藝術(shù)，你的目標(biāo)就是減少rendering的時(shí)間

展開Main圖表，Devtools展示了主線程運(yùn)行狀況。X軸代表著時(shí)間。每個(gè)長條代表著一個(gè)event。長條越長就代表這個(gè)event花費(fèi)的時(shí)間越長。Y軸代表了調(diào)用棧（call stack）。在棧里，上面的event調(diào)用了下面的event。

在性能報(bào)告中，有很多的數(shù)據(jù)。可以通過雙擊，拖動(dòng)等等動(dòng)作來放大縮小報(bào)告范圍，從各種時(shí)間段來觀察分析報(bào)告。

在事件長條的右上角出，如果出現(xiàn)了紅色小三角，說明這個(gè)事件是存在問題的，需要特別注意。

雙擊這個(gè)帶有紅色小三角的的事件。在Summary面板會(huì)看到詳細(xì)信息。注意reveal這個(gè)鏈接，雙擊它會(huì)讓高亮觸發(fā)這個(gè)事件的event。如果點(diǎn)擊了app.js:94這個(gè)鏈接，就會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的代碼處。

在app.update這個(gè)事件的長條下方，有很多被觸發(fā)的紫色長條。如果放大這些事件長條，你會(huì)看到它們每個(gè)都帶有紅色小三角。點(diǎn)擊其中一個(gè)紫色事件長條，Devtools在Summary面板里展示了更多關(guān)于這個(gè)事件的信息。確實(shí)，這里有很多reflow的警告。

在summary面板里點(diǎn)擊app.js:70鏈接，Devtools會(huì)跳轉(zhuǎn)到需要優(yōu)化的代碼處

OK！Devtools里面還有很多很多指標(biāo)需要你去探索，但是，對(duì)于怎么用Devtools去分析網(wǎng)頁的運(yùn)行時(shí)性能表現(xiàn)，你現(xiàn)在已經(jīng)有了一個(gè)基本的概念。

PS：筆者最近開源一款由IBM主導(dǎo)開發(fā)設(shè)計(jì)的叫做Carvue.js的組件庫，歡迎有興趣的朋友一起開發(fā)。Carvue.js

譯者博客
原文鏈接