全新Chrome Devtool Performance使用指南

運行時性能表現（runtime performance）指的是當你的頁面在瀏覽器運行時的性能表現，而不是在下載頁面的時候的表現。這篇指南將會告訴你怎麼用Chrome DevToos 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越高，用戶體驗越好。

 

 

1. 就在FPS圖表下方，你會看到CPU圖表。在CPU圖表中的各類顏色與Summary面板裏的顏色是相互對應的，Summary面板就在Performance面板的下方。CPU圖表中的各類顏色表明着在這個時間段內，CPU在各類處理上所花費的時間。若是你看到了某個處理佔用了大量的時間，那麼這可能就是一個能夠找到性能瓶頸的線索。

 

 

1. 把鼠標移動到FPS，CPU或者NET圖表之上，DevToos就會展現這個時間點界面的截圖。左右移動鼠標，能夠重發當時的屏幕錄像。這被稱爲scrubbing, 他能夠用來分析動畫的各個細節。

 

 

1. 在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實時面板就出如今頁面的右上方。

 

 

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

定位瓶頸

如今已經肯定到這個頁面的動畫性能表現不太好，那麼下一步就是找到爲何

1. 注意Summary面板，你會發現CPU花費了大量的時間在rendering上。由於提升性能就是一門作減法的藝術，你的目標就是減小rendering的時間

 

 

1. 展開Main圖表，Devtools展現了主線程運行情況。X軸表明着時間。每一個長條表明着一個event。長條越長就表明這個event花費的時間越長。Y軸表明了調用棧（call stack）。在棧裏，上面的event調用了下面的event。

 

 

1. 在性能報告中，有不少的數據。能夠經過雙擊，拖動等等動做來放大縮小報告範圍，從各類時間段來觀察分析報告。

 

 

1. 在事件長條的右上角出，若是出現了紅色小三角，說明這個事件是存在問題的，須要特別注意。
2. 雙擊這個帶有紅色小三角的的事件。在Summary面板會看到詳細信息。注意reveal這個連接，雙擊它會讓高亮觸發這個事件的event。若是點擊了app.js:94這個連接，就會跳轉到對應的代碼處。

 

 

1. 在app.update這個事件的長條下方，有不少被觸發的紫色長條。若是放大這些事件長條，你會看到它們每一個都帶有紅色小三角。點擊其中一個紫色事件長條，Devtools在Summary面板裏展現了更多關於這個事件的信息。確實，這裏有不少reflow的警告。
2. 在summary面板裏點擊app.js:70連接，Devtools會跳轉到須要優化的代碼處

 

 

OK！Devtools裏面還有不少不少指標須要你去探索，可是，對於怎麼用Devtools去分析網頁的運行時性能表現，你如今已經有了一個基本的概念。

 

譯者博客：NIC's UTOPIA