Chrome性能調優技巧

在開發大型Web應用或複雜交互的網站，難免會遇到一些頁面性能瓶頸的問題。本篇介紹一下如何利用Chrome的性能面板分析網站的性能瓶頸，應該對你有所幫助。

注意，爲了減小一些Chrome插件對性能評估產生噪音，最好打開隱身模式訪問頁面進行測試。

將Chrome切換到隱身模式，而後打開該頁面進行測試： https://googlechrome.github.io/devtools-samples/jank/

模擬移動設備

與臺式機和筆記本電腦相比，移動設備的CPU配置要遜色很多，因此咱們測試的時候一般會模擬移動設備進行測試：

• 點擊Network按鈕 將網絡切換成Fast 3G，此時網速爲正常的3G
• 點擊CPU throttling按鈕 將CPU設置爲 2x slowdown，此時CPU的運行比平時慢2倍

演示步驟

1. 點擊 "Add10"，藍色方塊的移動會逐漸變慢（在高端計算機上，可能須要大約20次點擊）

2. 點擊 "Optimize"觸發優化，藍色方塊移動會變快，且頁面明顯變得流暢

注意：若是在優化和未優化的版本之間看不到明顯的區別，請嘗試單擊 " Subtract10" 幾回，而後重試。若是添加了太多的藍色方塊，則只會使CPU佔用巨大內存，而不會看到兩個版本的結果有重大差別。

3. 點擊 "Un-Optimize" 取消優化。藍色方塊的移動速度會當即變慢，頁面也明顯變得卡頓

記錄運行時性能

當頁面激活 Optimize 時，藍色方塊移動得更快。這是爲何？其實兩種版本都應在相同的時間內將每一個正方形移動相同的空間。咱們能夠在「性能」面板中進行錄製，藉以瞭解如何檢測未優化版本中的性能瓶頸。

1. 在DevTools中，單擊 記錄 按鈕。當頁面運行時，DevTools開始捕獲性能指標
   
2. 等待十幾秒鐘
3. 點擊 中止 按鈕，DevTools中止記錄，處理數據，而後在 "性能" 面板上顯示結果

分析結果

記錄了頁面的性能後，就能夠衡量頁面的性能究竟如何，咱們能夠對此進行分析：

每秒分析幀

衡量任何動畫性能的主要指標是每秒幀數（FPS）。當動畫以 60 FPS 運行時頁面是最流暢狀態

1. 查看FPS圖表。每當您在FPS上方看到紅色條形時 ，表示幀速率降低得很低，以致於可能影響到用戶體驗。一般，綠色條越高，FPS越高。

2. 在FPS圖表下方是CPU圖表中相應的顏色CPU圖表，在性能板的底部是對應於顏色摘要選項卡。CPU圖表充滿色彩的事實意味着在記錄過程當中CPU已滿。每當您看到CPU長時間處於工做狀態時，就能夠找到減小工做量的方法。

3. 將鼠標懸停在FPS，CPU或NET圖表上。DevTools將顯示該時間點的頁面截圖。左右移動鼠標以重播錄音。這稱爲「擦洗」，對於手動分析動畫的進度頗有用。

4. 在 "Frames" 部分中，將鼠標懸停在綠色方塊之上。DevTools就會顯示該特定框架的FPS，每幀可能遠低於60 FPS的目標。

固然，經過此演示，很明顯發現這個頁面效果不佳。可是究竟哪一部分有性能問題可能還不是很清楚，所以須要使用該工具進行精確分析和測量。

打開FPS儀表盤

再介紹一個FPS測量儀工具，它能夠在頁面運行時提供FPS的實時估算值

• 輸入 Command+ Shift+ P 打開命令菜單
• 輸入 Rendering ，選擇 Show Rendering
• 在渲染選項卡，勾選 "FPS meter"按鈕，會在頁面上調出 FPS 面板

尋找性能瓶頸

已經知道了頁面性能不佳，並獲取了性能分析圖，咱們就須要進一步循序性能瓶頸：

1. 注意看下面的 Summary 選項卡。若是未選擇任何事件，則此選項卡顯示活動的系分圖。從圖上看顯然是 在渲染上花了大把時間。因爲性能是減小工做量的藝術，所以咱們要作就是 想辦法減小渲染工做上時間。

2. 展開** Main** 部分，顯示了主線程隨時間變化的活動圖表：
   • x軸表示一段時間內的記錄，每一個條形表明一個事件。較寬的條形表示該事件花費了更長的時間。
   • y軸表示調用堆棧。若是看到事件相互疊加時，表示較高的事件致使較低的事件

3. Screenshots 軌跡記錄了每一幀的數據，在「概述」上拖動鼠標來放大單個「觸發動畫」事件，該概述是包括 FPS，CPU和NET圖表的部分。Main 部分和 Summary 選項卡僅顯示記錄中所選部分的信息

注：另外一種調試方法經過鍵盤上的 A鍵（選區軌跡坐移）、D鍵（選區軌跡右移）、W鍵（縮小選區）、S鍵（增大選區）

4. 請注意 Animation Frame Fired 事件右上角的紅色三角形。每當看到紅色三角形時，都會警告您性能問題可能與此事件有關

注意：每當執行回調時，都會發生「 觸發動畫幀」 事件 requestAnimationFrame()

5. 單擊 Animation Frame Fired 事件。如今，Summary 選項卡向您顯示有關該事件的信息。注意顯示連接。單擊該按鈕將使DevTools突出顯示啓動了 Animation Frame Fired事件的事件。還要注意app.js:94的源碼連接。單擊可跳轉至源代碼中的相關行：

注意：選擇事件後，使用箭頭鍵選擇它旁邊的事件

6. 在 app.update 事件下，有一堆紫色事件。若是它們更寬，則看起來每一個對象上可能都有一個紅色三角形。單擊紫色的 Layout 事件中的一個，DevTools在 Summary 選項卡中提供有關事件的更多信息。確實，上面有關於強制迴流的警告（換句話說，就是佈局）

7. 在 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 發佈！