執行時效能表現（runtime performance）指的是當你的頁面在瀏覽器執行時的效能表現，而不是在下載頁面的時候的表現。這篇指南將會告訴你怎麼用Chrome DevTools Performance功能去分析執行時效能表現。在RAIL效能評估模型下，你可以在這篇指南中可以學到怎麼去用這個performance功能去分析Response, Animation, 以及 Idle 這三個效能指標。

讓我們開始吧

在這篇指南中，我們會用Performance工具去分析一個現有的線上DEMO，然後教會你怎麼去分析，從而找到效能瓶頸。

1.開啟Chrome的匿名模式。匿名模式可以保證Chrome在一個相對乾淨的環境下執行。比如說，你安裝了許多chrome外掛，這些外掛可能會影響我們分析效能表現。
2.在匿名模式下開啟右邊這個連結，DEMO，這個網頁就是我們要用來分析的DEMO。這個頁面裡都是很多上下移動的藍色小方塊。
3.按下Command+Opiton+I（Mac）或者Control+shift+I (Windows, Linux) 來開啟Devtools

模擬移動裝置的CPU

移動裝置的CPU一般比桌上型電腦和筆記本弱很多。當你想分析頁面的時候，可以用CPU控制器（CPU Throttling）來模擬移動端裝置CPU。
1.在DevTools中，點選 Performance 的 tab。
2.確保 Screenshots checkbox 被選中
3.點選 Capture Settings（⚙️）按鈕，DevTools會展示很多設定，來模擬各種狀況
4.對於模擬CPU，選擇2x slowdown，於是Devtools就開始模擬兩倍低速CPU

設定DEMO

為了使得這個DEMO有相對統一的執行表現（不同的讀者，機器的效能千差萬別）。這個DEMO提供了自定義功能，用來確保這個DEMO的統一表現。

1.一直點選 Add 10 這個按鈕直到你能很明顯看到藍色小方塊移動變慢，在效能比較好的機器上，大概要點選20次左右。
2.點選 Optimize按鈕，你會發現藍色小方塊會變的很快而且動畫變得平滑。
3.點選 un-optimize 按鈕，藍色小方塊又會變成之前的模樣。

記錄執行時效能表現

在之前的DEMO中，當你執行優化模式的時候，藍色小方塊移動地非常快。為什麼呢？明明兩個模式都是移動了同樣數量的小方塊而且移動的時間也一樣。那麼現在我們在Performance介面下錄製下發生的一切，並且學習如何分析這個記錄，從而找到非優化模式下的效能瓶頸。

1.在DevTools中，點選 Record 。這時候Devtools就開始錄製各種效能指標

1.等待幾分鐘
2.點選Stop按鈕，Devtools停止錄製，處理資料，然後顯示效能報告

wow，看起來有非常多的資料，別害怕，我們一個一個來介紹

分析報告

一旦你得到了頁面的效能表現報告，那麼就可以用它來分析頁面的效能，從而找到效能瓶頸。

分析每一秒的幀

FPS（frames per second）是用來分析動畫的一個主要效能指標。能保持在60的FPS的話，那麼使用者體驗就是不錯的。

1.觀察FPS圖表，如果你發現了一個紅色的長條，那麼就說明這些幀存在嚴重問題，有可能導致非常差的使用者體驗。一般來說，綠色的長條越高，說明FPS越高，使用者體驗越好。

2.就在FPS圖表下方，你會看到CPU圖表。在CPU圖表中的各種顏色與Summary面板裡的顏色是相互對應的，Summary面板就在Performance面板的下方。CPU圖表中的各種顏色代表著在這個時間段內，CPU在各種處理上所花費的時間。如果你看到了某個處理佔用了大量的時間，那麼這可能就是一個可以找到效能瓶頸的線索。

3.把滑鼠移動到FPS，CPU或者NET圖表之上，DevToos就會展示這個時間點介面的截圖。左右移動滑鼠，可以重發當時的螢幕錄影。這被稱為scrubbing, 他可以用來分析動畫的各個細節。

4.在Frames圖表中，把滑鼠移動到綠色條狀圖上，Devtools會展示這個幀的FPS。每個幀可能都在60以下，都沒有達到60的標準。

當然這個對於DEMO，可以相當容易觀察到效能的問題。但是在現實使用場景下，就不是那麼容易觀察到了。所以要把常常使用這些工具來分析頁面。

小功能：顯示實時FPS面板

另外一個好用的小工具就是實時FPS面板，它可以實時展示頁面的FPS指標

1.按下 Command+Shift+P（Mac）或者 Control+Shift+P(Windows, Linux) 開啟命令選單
2.輸入Rendering，點選Show Rendering
3.在Rendering面板裡，啟用FPS Meter。FPS實時面板就出現在頁面的右上方。

關閉FPS Meter只要按下Escape就可以了。這篇指南里暫時用不上這個功能。

定位瓶頸

現在已經確定到這個頁面的動畫效能表現不太好，那麼下一步就是找到為什麼

1.注意Summary面板，你會發現CPU花費了大量的時間在rendering上。因為提高效能就是一門做減法的藝術，你的目標就是減少rendering的時間

2.展開Main圖表，Devtools展示了主執行緒執行狀況。X軸代表著時間。每個長條代表著一個event。長條越長就代表這個event花費的時間越長。Y軸代表了呼叫棧（call stack）。在棧裡，上面的event呼叫了下面的event。

3.在效能報告中，有很多的資料。可以通過雙擊，拖動等等動作來放大縮小報告範圍，從各種時間段來觀察分析報告。

4.在事件長條的右上角出，如果出現了紅色小三角，說明這個事件是存在問題的，需要特別注意。
5.雙擊這個帶有紅色小三角的的事件。在Summary面板會看到詳細資訊。注意reveal這個連結，雙擊它會讓高亮觸發這個事件的event。如果點選了app.js:94這個連結，就會跳轉到對應的程式碼處。

6.在app.update這個事件的長條下方，有很多被觸發的紫色長條。如果放大這些事件長條，你會看到它們每個都帶有紅色小三角。點選其中一個紫色事件長條，Devtools在Summary面板裡展示了更多關於這個事件的資訊。確實，這裡有很多reflow的警告。
在summary面板裡點選app.js:70連結，Devtools會跳轉到需要優化的程式碼處

OK！Devtools裡面還有很多很多指標需要你去探索，但是，對於怎麼用Devtools去分析網頁的執行時效能表現，你現在已經有了一個基本的概念。

原文連結