Chrome 開發者工具的性能選項卡使用教程（譯文）

前言

這篇文章Google開發者中DevTools^[1]文檔Performance部分的英文譯文，若有翻譯不對的地方，但願你們指出

原文：developers.google.com/web/tools/c…
做者： Kayce Basques
譯者： Timwk

注：未經許可，請勿轉載

正文

「注：能夠查看優化網站速度以瞭解如何使您的頁面加載速度更快。」

運行性能（Runtime performance）是頁面運行（而不是加載）時的性能。 本教程將教您如何使用「Chrome DevTools」的性能選項卡(performance)來分析運行性能。 在RAIL(response, animation, idle, load)模型方面，您在本教程中學習的技能對於分析頁面的響應，動畫和空閒階段頗有用。

警告：本教程基於Chrome59。若是您使用其餘版本的Chrome，則DevTools的UI和功能可能會有所不一樣。 檢查chrome：// help，查看您正在運行的Chrome版本。

教程開始

在本次教程中，你在頁面中打開 「DevTools」，並使用「Performance」 選項卡來查找頁面的性能瓶頸

1. 在隱身模式中打開 「Google Chrome」。隱身模式可以使 「Chrome」 進入純淨狀態，例如：若是您安裝了許多瀏覽器擴展，這些擴展可能會干擾性能評估，得不到準確的數據；
2. 在隱身窗口中打開下面頁面。這是該教程的演示頁面。這個頁面中顯示了一羣上下移動的小藍色方塊；
   googlechrome.github.io/devtools-sa…
3. 使用快捷鍵 「Command+Option+I」(Mac) 或 「Control+Shift+I」(Windows,Linux) 打開 DevTools ,效果以下圖： ˆ 「圖1」 頁面在左邊，DevTools在右邊

注意：對於後續其餘的屏幕截圖，`DevTools`將做爲 單獨的窗口出現，以便你能更好的查看內容

模擬移動CPU

與臺式電腦和筆記本相比，移動設備的CPU的性能要低不少。因此當你分析頁面，通常使用CPU限制來模擬頁面在移動設備上的表現；

1. 在 「Devtools」中，單擊」性能「選項卡；
2. 肯定啓動 「Screenshots」 複選框；
3. 單擊 「Capture Setting」 。 「DevTools」 會展開跟性能分析時環境相關的設置。
4. 對於 「CPU」選項，選擇 「2x slowdown」。DevTools會限制你的CPU,使其比正常時慢2倍 「圖2」 CPU 節流設置，藍色框處

注意：在測試其餘頁面時，若是要確保它們在低端移動設備上能夠正常工做，請將CPU限制設置爲20倍速度減慢。 此演示沒法與20倍的減速一塊兒很好地工做，所以僅將2倍的減速用於教學目的。
譯者注：目前的手機cpu性能已遠超以前，目前chrome中只能設置4x\6x

演示設置

由於很難建立一個使全部用戶都表現一致的運行性能演示頁面^[2]。接下來你須要自定義演示，以確保在你的條件下，你的體驗與本教程中看到的屏幕截圖和說明相對一致；

1. 單擊「Add 10」 按鈕，知道藍色方塊的移動速度明顯比初始時慢。在性能好的計算機上，可能須要約20次的點擊

2. 單擊「Optimize」（優化）按鈕，藍色方塊能移動得更快更穩

注意：若是你看不到優化和未優化版之間的明顯差別，請嘗試單擊「Subtract 10」按鈕幾回，而後重試上面操做。若是添加過多的藍色方塊，則只會使CPU達到最大值，而不會看到兩個版本的結果有太大的差別；

3. 單擊 」Un-Optimize「按鈕。藍色方塊的移動速度會變慢和頁面變得卡頓

記錄運行性能

當您運行頁面的優化版本時，藍色方塊移動得更快。 這是爲何？ 兩種版本都應在相同的時間內將每一個正方形移動相同的空間。 在「performance」選項卡中進行錄製，能夠了解如何檢測未優化版本中的性能瓶頸。

1. 在 「DevTools」中，單擊「Record」。 「DevTools」 捕獲頁面運行時的性能指標。

「圖3」：頁面分析

2. 等幾秒鐘。
3. 點擊 」Stop「 按鈕， 「DevTools」 中止記錄，處理數據，而後在 「performance」選項卡上顯示最終結果 「圖4」：分析結果

wow, 這是數據量也太大了吧。但不用擔憂，接下來你就會知道這些數據的含義的；

結果分析

記錄了頁面的性能後，就能夠衡量頁面的性能有多差，並找出緣由。

分析每秒幀數（Frames Per Second,簡稱：FPS)

衡量動畫性能的主要指標是每秒幀數（FPS）。 當動畫以60 FPS運行時，用戶看着是流暢的^[3]。

1. 查看「FPS」表，若是你在圖標的上方看到紅色條，則表示頁面幀數很低，會影響用戶的使用體驗（譯者：會讓用戶以爲有卡頓出現） 「圖5」：藍框標識的是 FPS 圖表

2. 在 FPS 圖表下方，你會看到CPU圖標。CPU圖表中的顏色與「Performance」選項卡底部的「Summary」選項卡的顏色對應。CPU圖表中，顏色填充的高度越高則表示使用CPU的資源越多。當你看到CPU長時間處於滿負荷的狀態，就須要尋找減小使用CPU的方法； ˆ

「圖6」：藍框標識CPU圖標和「Summary」選項卡

3. 將鼠標懸停在FPS，CPU或NET圖表上。 「DevTools」將顯示該時間點的頁面截圖。 左右移動鼠標以顯示記錄。 這稱爲 scrubbing(譯者：這裏暫時沒找到合適的翻譯)，對於手動分析動畫的播放頗有用。 「圖7」：查看記錄中約2000ms處頁面的屏幕截圖

4. 在「Frames」(幀)部分，將鼠標懸停在某個綠色的方塊上，「DevTools」 會顯示特定幀的FPS,幀數可能遠遠達不到 60 FPS 的目標；

「圖8」：懸停在幀上

在這個演示上，咱們能很明顯的看出頁面效果很差。但在實際狀況中，可能不會很明顯，所以使用這些工具能很方便的進行檢測。

額外：打開 FPS 儀表

另外一個方便的工具是FPS測量儀，它能夠在頁面運行時提供FPS的實時估算。

1. 按Command + Shift + P（Mac）或Control + Shift + P（Windows，Linux）打開「命令」菜單。
2. 在輸入欄輸入「Rendering」，而後選擇「Show Rendering」。
3. 在 「Rendering」選項卡中，選中 「FPS Meter」, 會有一個新的懸浮層顯示在視圖的右上角（MAC是左上角）。

「圖9」：FPS 面板

4. 取消 FPS Meter， 而後按ESC鍵關閉 「Rendering」選項卡，在本教程你將用不到這個面板。

尋找瓶頸

如今，您已經測量並驗證了動畫效果不佳，接下來要回答的問題是：爲何？

1. 注意 「summary」選項卡。 若是未選擇任何事件，則此選項卡顯示活動的分類。 該頁面花費了大部分時間進行渲染。 因爲提升性能是減小瀏覽器工做量的藝術，所以您的目標是減小花費在進行渲染工做上的時間。

「圖10」：藍色框是「Summary」選項卡

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

「圖11」：藍色框是「Main」塊

3. 記錄中有不少數據。 經過單擊，按住並在「概述」上拖動鼠標來放大單個 「Animation Frame Fired」事件，該概述是包括FPS，CPU和NET圖表的部分。 「Main」塊和「summary」選項卡僅顯示記錄中所選部分的信息。 「圖12」：放大單個 Animation Frame Fired事件

注意：另外一種縮放方法是經過單擊"Main"塊的背景或選擇一個事件來聚焦觀察，而後按W，A，S和D鍵（譯者：W是放大，S是縮小，S左移，D右移）。

4. 請注意「Animation Frame Fired」事件右上角的紅色三角形。但你看到有紅色三角形出現的時候，代表該事件存在問題。

注意：當requestAnimationFrame()回調執行時，會觸發「Animation Frame Fired 」事件的觸發

5. 點擊 Animation Frame Fired事件時， 「Summary」選項卡會顯示該事件的相關信息。注意 reveal連接，點擊連接， 「DevTools」會突出顯示啓動該 Animation Frame Fired事件的事件。同時還要注意 app.js:94連接，點擊會跳到源代碼中的相關行。

「圖12」：關於Animation Frame Fired事件的更多消息

注意：選擇事件後，可使用方向鍵選擇該事件旁邊的事件

6. 在app.update事件下方，有一堆紫色事件。若是將其放寬，會看到幾乎每一個紫色事件上都有一個紅色三角形。如今單擊其中一個紫色的Layout事件。查看「DevTools」中的「Summary」選項卡提供的信息，會發現確實存在強制重排（reflows)的警告(也就是強制佈局的警告)

7. 在「Summary」選項卡中，單擊Layout Forced下的app.js:70連接，「DevTools」會切換到觸發強制佈局的代碼行

「圖13」：觸發強制佈局的代碼行

注意： 此代碼的問題是: 在每幀動畫幀中，它都會修改正方形的樣式，而後查詢頁面上每一個正方形的位置。因爲樣式已被修改，瀏覽器就不知道正方形的位置是否有更改，因此就須要從新佈局正方形才能計算其位置。能夠查看[ Use transform and opacity changes for animations ](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance)學習更多相關知識

作得很好，因此花費了一些時間，可是如今你已經有分析運行性能的堅實基礎了。

額外：分析優化版本

單擊演示頁面上的Optimize按鈕，啓動優化了代碼的版本，而後使用剛學習的流程和工具進行性能記錄，而後分析結果。從改進的幀率到「Main」塊火焰圖中事件的減小，你看到優化版本的應用作了更少的工做，從而得到更好的性能；

注意： 這個「優化」版本也不是最好的，由於它仍然操做每一個正方形的 top 屬性。更好的方法是隻操做影響合成的屬性。有關更多信息，請參見 Use transform and opacity changes for animations

下一步

RAIL模型是瞭解性能的基礎。該模型告訴你，對用戶而言，哪些是最重要的性能指標。有關更多信息，請查看Measure performance with the RAIL model

更多的實踐能讓你對「Performance」選項卡更加的熟悉。請嘗試對你本身的頁面進行分析，並分析結果。若是你對你的結果有任何疑問，能夠在Stack Overflow發佈一個標有google-chrome-devtools標籤的問題。若是能夠，請附上屏幕截圖或指向可複製頁面的連接

要真正掌握運行時性能，你必須學習瀏覽器如何將HTML、CSS和JS轉換爲屏幕上像素點。能夠從 Rendering Performance Overview開始學習。The Anatomy Of A Frame這篇文章深刻討論了更多細節。

最後，有許多方法能夠改善運行時性能。 本教程重點介紹了一個特定的動畫瓶頸，以使您能夠重點關注「Performance」面板，但這只是您可能遇到的許多瓶頸之一。 渲染性能系列的其他部分提供了許多改善運行時性能各個方面的好技巧，例如：

• Optimizing JS Execution
• Reduce The Scope And Complexity Of Style Calculations
• Avoid Large, Complex Layouts And Layout Thrashing
• Simplify Paint Complexity And Reduce Paint Areas
• Stick To Compositor-Only Properties And Manage Layer Count
• Debounce Your Input Handlers

Reference

[1]

Devtools是什麼: chrome的開發者工具，由幾個選項卡工具組成。

[2]

沒法獲得表現一致的演示（譯者注）: 由於用戶的設備配置和performance選項版配置的不一樣。

[3]

爲何是60 FPS: 與人眼識別有關係

本文使用 mdnice 排版