在開發大型Web應用或複雜交互的網站，不免會遇到一些頁面性能瓶頸的問題。本篇介紹一下如何利用Chrome的性能面板分析網站的性能瓶頸，應該對你有所幫助。
注意，爲了減少一些Chrome插件對性能評估產生噪音，最好打開隱身模式訪問頁面進行測試。
將Chrome切換到隱身模式，然後打開該頁面進行測試： https://googlechrome.github.io/devtools-samples/jank/
模擬移動設備
與臺式機和筆記本電腦相比，移動設備的CPU配置要遜色不少，所以我們測試的時候通常會模擬移動設備進行測試：
- 點擊
Network按鈕 將網絡切換成Fast 3G，此時網速爲正常的3G - 點擊
CPU throttling按鈕 將CPU設置爲2x slowdown，此時CPU的運行比平時慢2倍
演示步驟
-
點擊 "Add10"，藍色方塊的移動會逐漸變慢（在高端計算機上，可能需要大約20次點擊）
-
點擊 "Optimize"觸發優化，藍色方塊移動會變快，且頁面明顯變得流暢
注意：如果在優化和未優化的版本之間看不到明顯的區別，請嘗試單擊 " Subtract10" 幾次，然後重試。如果添加了太多的藍色方塊，則只會使CPU佔用巨大內存，而不會看到兩個版本的結果有重大差異。
- 點擊 "Un-Optimize" 取消優化。藍色方塊的移動速度會立即變慢，頁面也明顯變得卡頓
記錄運行時性能
當頁面激活 Optimize 時，藍色方塊移動得更快。這是爲什麼？其實兩種版本都應在相同的時間內將每個正方形移動相同的空間。我們可以在“性能”面板中進行錄製，藉以瞭解如何檢測未優化版本中的性能瓶頸。
- 在DevTools中，單擊 記錄 按鈕。當頁面運行時，DevTools開始捕獲性能指標
![捕獲性能]()
- 等待十幾秒鐘
- 點擊 停止 按鈕，DevTools停止記錄，處理數據，然後在 "性能" 面板上顯示結果
分析結果
記錄了頁面的性能後，就可以衡量頁面的性能究竟如何，我們可以對此進行分析：
每秒分析幀
衡量任何動畫性能的主要指標是每秒幀數（FPS）。當動畫以 60 FPS 運行時頁面是最流暢狀態
- 查看FPS圖表。每當您在FPS上方看到紅色條形時 ，表示幀速率下降得很低，以至於可能影響到用戶體驗。通常，綠色條越高，FPS越高。
- 在FPS圖表下方是CPU圖表中相應的顏色CPU圖表，在性能板的底部是對應於顏色摘要選項卡。CPU圖表充滿色彩的事實意味着在記錄過程中CPU已滿。每當您看到CPU長時間處於工作狀態時，就可以找到減少工作量的方法。
- 將鼠標懸停在FPS，CPU或NET圖表上。DevTools將顯示該時間點的頁面截圖。左右移動鼠標以重播錄音。這稱爲“擦洗”，對於手動分析動畫的進度很有用。
- 在 "Frames" 部分中，將鼠標懸停在綠色方塊之上。DevTools就會顯示該特定框架的FPS，每幀可能遠低於60 FPS的目標。
當然，通過此演示，很明顯發現這個頁面效果不佳。但是究竟哪一部分有性能問題可能還不是很清楚，因此需要使用該工具進行精確分析和測量。
打開FPS儀表盤
再介紹一個FPS測量儀工具，它可以在頁面運行時提供FPS的實時估算值
- 輸入
Command+ Shift+ P打開命令菜單 - 輸入
Rendering，選擇Show Rendering - 在渲染選項卡，勾選 "FPS meter"按鈕，會在頁面上調出 FPS 面板
尋找性能瓶頸
已經知道了頁面性能不佳，並獲取了性能分析圖，我們就需要進一步循序性能瓶頸：
- 注意看下面的 Summary 選項卡。如果未選擇任何事件，則此選項卡顯示活動的系分圖。從圖上看顯然是 在渲染上花了大把時間。由於性能是減少工作量的藝術，因此我們要做就是 想辦法減少渲染工作上時間。
- 展開** Main** 部分，顯示了主線程隨時間變化的活動圖表：
- x軸表示一段時間內的記錄，每個條形代表一個事件。較寬的條形表示該事件花費了更長的時間。
- y軸表示調用堆棧。如果看到事件相互疊加時，表示較高的事件導致較低的事件
- Screenshots 軌跡記錄了每一幀的數據，在“概述”上拖動鼠標來放大單個“觸發動畫”事件，該概述是包括 FPS，CPU和NET圖表的部分。Main 部分和 Summary 選項卡僅顯示記錄中所選部分的信息
注：另一種調試方法通過鍵盤上的 A鍵（選區軌跡坐移）、D鍵（選區軌跡右移）、W鍵（縮小選區）、S鍵（增大選區）
- 請注意 Animation Frame Fired 事件右上角的紅色三角形。每當看到紅色三角形時，都會警告您性能問題可能與此事件有關
注意：每當執行回調時，都會發生“ 觸發動畫幀” 事件
requestAnimationFrame()
- 單擊 Animation Frame Fired 事件。現在，Summary 選項卡向您顯示有關該事件的信息。注意顯示鏈接。單擊該按鈕將使DevTools突出顯示啓動了 Animation Frame Fired事件的事件。還要注意
app.js:94的源碼鏈接。單擊可跳轉至源代碼中的相關行：
注意：選擇事件後，使用箭頭鍵選擇它旁邊的事件
-
在
app.update事件下，有一堆紫色事件。如果它們更寬，則看起來每個對象上可能都有一個紅色三角形。單擊紫色的Layout事件中的一個，DevTools在 Summary 選項卡中提供有關事件的更多信息。確實，上面有關於強制迴流的警告（換句話說，就是佈局） -
在 Summary 標籤中，點擊強制佈局下的
app.js:70源碼鏈接，DevTools帶您進入強制佈局的代碼行
注意：此代碼的問題在於，在每個動畫幀中，它都會更改每個正方形的樣式，然後查詢頁面上每個正方形的位置。由於樣式已更改，因此瀏覽器不知道每個正方形的位置是否已更改，因此必須重新佈局正方形才能計算其位置。請參見 Avoid forced synchronous layouts
分析優化版本
使用上面介紹的工作流程和工具，我們接下來點擊頁面上的 Optimize 按鈕，頁面切換到優化版本，此時再調用一次性能面板，然後對結果進行分析，我們可以看到該應用程序的優化版本所做的工作少得多，從而提高了頁面運行性能。
注意：即使這個“優化”版本也不是那麼好，因爲它仍然可以操縱top每個正方形的屬性。更好的方法是堅持隻影響合成的屬性。有關更多信息，請參見 Use transform and opacity changes for animations。
參考文獻
- Get Started With Analyzing Runtime Performance by Kayce Basques
本文由博客一文多發平臺 OpenWrite 發佈！