運行時性能表現(xiàn)（runtime performance）指的是當(dāng)你的頁面在瀏覽器運行時的性能表現(xiàn)，而不是在下載頁面的時候的表現(xiàn)吼蚁。這篇指南將會告訴你怎么用Chrome DevToos Performance功能去分析運行時性能表現(xiàn)姜胖。在RAIL性能評估模型下矢否，你可以在這篇指南中可以學(xué)到怎么去用這個performance功能去分析Response, Animation, 以及 Idle 這三個性能指標(biāo)饮焦。
讓我們開始吧
在這篇指南中，我們會用Performance工具去分析一個現(xiàn)有的在線DEMO勒虾，然后教會你怎么去分析，從而找到性能瓶頸瘸彤。
打開Chrome的匿名模式修然。匿名模式可以保證Chrome在一個相對干凈的環(huán)境下運行。比如說质况，你安裝了許多chrome插件愕宋，這些插件可能會影響我們分析性能表現(xiàn)。
在匿名模式下打開右邊這個鏈接拯杠，DEMO掏婶，這個網(wǎng)頁就是我們要用來分析的DEMO。這個頁面里都是很多上下移動的藍色小方塊潭陪。
按下Command+Opiton+I（Mac）或者Control+shift+I (Windows, Linux) 來打開Devtools
模擬移動設(shè)備的CPU
移動設(shè)備的CPU一般比臺式機和筆記本弱很多雄妥。當(dāng)你想分析頁面的時候，可以用CPU控制器（CPU Throttling）來模擬移動端設(shè)備CPU依溯。
在DevTools中老厌，點擊 Performance 的 tab。
確保 Screenshots checkbox 被選中
點擊 Capture Settings（??）按鈕黎炉，DevTools會展示很多設(shè)置枝秤，來模擬各種狀況
對于模擬CPU，選擇2x slowdown慷嗜，于是Devtools就開始模擬兩倍低俗CPU
設(shè)置DEMO
為了使得這個DEMO有相對統(tǒng)一的運行表現(xiàn)（不同的讀者淀弹，機器的性能千差萬別）。這個DEMO提供了自定義功能庆械，用來確保這個DEMO的統(tǒng)一表現(xiàn)薇溃。
一直點擊 Add 10 這個按鈕直到你能很明顯看到藍色小方塊移動變慢，在性能比較好的機器上缭乘，大概要點擊20次左右沐序。
點擊 Optimize按鈕，你會發(fā)現(xiàn)藍色小方塊會變的很快而且動畫變得平滑堕绩。
點擊 un-optimize 按鈕策幼，藍色小方塊又會變成之前的模樣。
記錄運行時性能表現(xiàn)
在之前的DEMO中奴紧，當(dāng)你運行優(yōu)化模式的時候特姐，藍色小方塊移動地非常快绰寞。為什么呢到逊？明明兩個模式都是移動了同樣數(shù)量的小方塊而且移動的時間也一樣铣口。那么現(xiàn)在我們在Performance界面下錄制下發(fā)生的一切滤钱，并且學(xué)習(xí)如何分析這個記錄觉壶，從而找到非優(yōu)化模式下的性能瓶頸。
在DevTools中件缸，點擊 Record 铜靶。這時候Devtools就開始錄制各種性能指標(biāo)
等待幾分鐘
點擊Stop按鈕，Devtools停止錄制他炊，處理數(shù)據(jù)争剿，然后顯示性能報告
wow，看起來有非常多的數(shù)據(jù)痊末，別害怕蚕苇，我們一個一個來介紹
分析報告
一旦你得到了頁面的性能表現(xiàn)報告，那么就可以用它來分析頁面的性能凿叠，從而找到性能瓶頸涩笤。
分析每一秒的幀
FPS（frames per second）是用來分析動畫的一個主要性能指標(biāo)。能保持在60的FPS的話盒件，那么用戶體驗就是不錯的蹬碧。
觀察FPS圖表，如果你發(fā)現(xiàn)了一個紅色的長條炒刁，那么就說明這些幀存在嚴(yán)重問題恩沽，有可能導(dǎo)致非常差的用戶體驗。一般來說翔始，綠色的長條越高罗心，說明FPS越高，用戶體驗越好城瞎。
就在FPS圖表下方菇爪，你會看到CPU圖表撒强。在CPU圖表中的各種顏色與Summary面板里的顏色是相互對應(yīng)的，Summary面板就在Performance面板的下方。CPU圖表中的各種顏色代表著在這個時間段內(nèi)晦譬，CPU在各種處理上所花費的時間。如果你看到了某個處理占用了大量的時間卦尊，那么這可能就是一個可以找到性能瓶頸的線索酌伊。
把鼠標(biāo)移動到FPS，CPU或者NET圖表之上卷员，DevToos就會展示這個時間點界面的截圖盈匾。左右移動鼠標(biāo)，可以重發(fā)當(dāng)時的屏幕錄像削饵。這被稱為scrubbing, 他可以用來分析動畫的各個細(xì)節(jié)岩瘦。
在Frames圖表中，把鼠標(biāo)移動到綠色條狀圖上窿撬，Devtools會展示這個幀的FPS启昧。每個幀可能都在60以下，都沒有達到60的標(biāo)準(zhǔn)劈伴。
當(dāng)然這個對于DEMO密末，可以相當(dāng)容易觀察到性能的問題。但是在現(xiàn)實使用場景下跛璧，就不是那么容易觀察到了严里。所以要把常常使用這些工具來分析頁面。
小功能：顯示實時FPS面板
另外一個好用的小工具就是實時FPS面板追城，它可以實時展示頁面的FPS指標(biāo)
按下 Command+Shift+P（Mac）或者 Control+Shift+P(Windows, Linux) 打開命令菜單
輸入Rendering刹碾，點選Show Rendering
在Rendering面板里，激活FPS Meter座柱。FPS實時面板就出現(xiàn)在頁面的右上方迷帜。
關(guān)閉FPS Meter只要按下Escape就可以了。這篇指南里暫時用不上這個功能辆布。
定位瓶頸
現(xiàn)在已經(jīng)確定到這個頁面的動畫性能表現(xiàn)不太好瞬矩，那么下一步就是找到為什么
注意Summary面板，你會發(fā)現(xiàn)CPU花費了大量的時間在rendering上锋玲。因為提高性能就是一門做減法的藝術(shù)景用，你的目標(biāo)就是減少rendering的時間
展開Main圖表，Devtools展示了主線程運行狀況惭蹂。X軸代表著時間伞插。每個長條代表著一個event。長條越長就代表這個event花費的時間越長盾碗。Y軸代表了調(diào)用棧（call stack）媚污。在棧里，上面的event調(diào)用了下面的event廷雅。
在性能報告中耗美，有很多的數(shù)據(jù)『阶海可以通過雙擊商架，拖動等等動作來放大縮小報告范圍，從各種時間段來觀察分析報告芥玉。
在事件長條的右上角出蛇摸，如果出現(xiàn)了紅色小三角，說明這個事件是存在問題的灿巧，需要特別注意赶袄。
雙擊這個帶有紅色小三角的的事件揽涮。在Summary面板會看到詳細(xì)信息。注意reveal這個鏈接饿肺，雙擊它會讓高亮觸發(fā)這個事件的event蒋困。如果點擊了app.js:94這個鏈接，就會跳轉(zhuǎn)到對應(yīng)的代碼處唬格。
在app.update這個事件的長條下方家破，有很多被觸發(fā)的紫色長條颜说。如果放大這些事件長條购岗，你會看到它們每個都帶有紅色小三角。點擊其中一個紫色事件長條门粪，Devtools在Summary面板里展示了更多關(guān)于這個事件的信息喊积。確實，這里有很多reflow的警告玄妈。
在summary面板里點擊app.js:70鏈接乾吻，Devtools會跳轉(zhuǎn)到需要優(yōu)化的代碼處
OK！Devtools里面還有很多很多指標(biāo)需要你去探索拟蜻，但是绎签，對于怎么用Devtools去分析網(wǎng)頁的運行時性能表現(xiàn)，你現(xiàn)在已經(jīng)有了一個基本的概念
