在開發大型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 發布！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/21703.html
標籤：JavaScript
上一篇：前端架構發展史