[Analyze runtime performance](https://developer.chrome.com/docs/devtools/evaluate-performance/)
![](https://img-blog.csdnimg.cn/img_convert/1a8dc041b367f79dca70db9bafd4409c.png)

執行時效能是您的頁面在執行時的表現，而不是載入。 就 RAIL 模型而言，本文介紹的方法對於分析頁面的響應、動畫和空閒階段非常有用。

在隱身模式下開啟谷歌瀏覽器。 隱身模式可確保 Chrome 以乾淨的狀態執行。 例如，如果您安裝了很多擴充套件，這些擴充套件可能會在您的效能測量中產生干擾。

在您的隱身視窗中載入以下頁面。 這是您要分析的演示。 該頁面顯示了一堆上下移動的藍色小方塊。

https://googlechrome.github.io/devtools-samples/jank/

# Simulate a mobile CPU

移動裝置的 CPU 能力遠低於桌上型電腦和膝上型電腦。 每當您分析頁面時，請使用 CPU 節流來模擬您的頁面在移動裝置上的表現。

下列選項，CPU 4x slowdown, 模擬出運算速度只有當前 1/4 的 CPU：

![](https://img-blog.csdnimg.cn/img_convert/01f4587e039b23b116bbfa5cc15d2156.png)

# Set up the demo

很難為所有讀者建立一個始終如一的執行時效能演示。 因此 Google 準備了一個允許自定義螢幕上出現元素數量的 web 應用，以確保您的體驗與您在本教程中看到的螢幕截圖和描述相對一致，而不管您的計算機的硬體配置如何。

(1) 繼續單擊 Add 10，直到藍色方塊的移動速度明顯比以前慢。 在高階機器上，可能需要大約 20 次點選。

(2) 單擊最佳化。 藍色方塊應該移動得更快更平穩。

![](https://img-blog.csdnimg.cn/img_convert/73b42b39ebc6bfa1ec95e8524bb13628.png)

如果您沒有看到最佳化和未最佳化版本之間的明顯差異，請嘗試多次單擊“減去 10”並重試。 如果新增太多藍色方塊，只會使 CPU 使用率最大化，並且不會看到兩個版本的結果有很大差異。

# Record runtime performance

當您執行頁面的最佳化版本時，藍色方塊移動得更快。 這是為什麼？ 兩個版本都應該在相同的時間內將每個方格移動相同的空間。 在效能皮膚中進行錄製，瞭解如何檢測未最佳化版本中的效能瓶頸。

點選 Performance 皮膚的 Record 圖示，開始錄製：
![](https://img-blog.csdnimg.cn/img_convert/099dd3dc8630c10a51a401e439bc4520.png)

等幾秒鐘後，點選 Stop:

![](https://img-blog.csdnimg.cn/img_convert/aaa2b763d8a7c0563f1d0ae223f4b4de.png)

下面介紹如何解讀 Performances 皮膚生成的統計資料。

# Analyze frames per second

衡量任何動畫效能的主要指標是每秒幀數 (FPS)。當動畫以 60 FPS 執行時，意味著較好的使用者體驗。

檢視 FPS 圖表。 每當您看到 FPS 上方的紅色條時，就意味著幀率下降得太低，可能會損害使用者體驗。 一般來說，綠色條越高，FPS 越高。

如下圖所示，我開啟了 recording，然後重複點選 Add 10，在此過程中，能看到代表 FPS 低於 60 的紅線逐漸升高，然後在 CPU 欄，代表 Rendering 的紫色圖例越來越多。
![](https://img-blog.csdnimg.cn/img_convert/1ffda05b4642ff4492a0fd7752e7e986.png)

將滑鼠懸停在 FPS、CPU 或 NET 圖表上。 DevTools 顯示了當時頁面的螢幕截圖。 左右移動滑鼠可重播錄音。 這稱為擦洗(scrubbing)，它對於手動分析動畫的程式很有用。

![](https://img-blog.csdnimg.cn/img_convert/a679809c665e5a21e640799f801433a2.png)

看這個 frames 欄：

![](https://img-blog.csdnimg.cn/img_convert/537a70514bc0b1de1431672b507e6a8d.png)

在框架部分，將滑鼠懸停在其中一個綠色方塊上。 DevTools 會向您顯示該特定幀的 FPS。 每幀可能遠低於 60 FPS 的目標。

# Bonus: Open the FPS meter

我們還可以使用 FPS meter 觀測一個網頁實時的 FPS 資料。

快捷鍵：Control+Shift+P 選擇 show rendering：
![](https://img-blog.csdnimg.cn/img_convert/32732a3d4a031ab8ecfb8bac0b76ec62.png)

在渲染選項卡中，啟用 FPS Meter。即下圖這個 checkbox：

![](https://img-blog.csdnimg.cn/img_convert/d27d5ace81d66174ce45ffc910d5c050.png)

視口的右上角會出現一個新的疊加層。能顯示實時的 FPS 資料：
![](https://img-blog.csdnimg.cn/img_convert/8815ce3df4d2fef06a28ffae4631192f.png)

我們在 summary 標籤頁裡看到，該 web 應用的瓶頸在 rendering：
![](https://img-blog.csdnimg.cn/img_convert/aa1ec21b7f1dc355cd18ea6c862a51e9.png)

展開 main 部分。 DevTools 會向您顯示主執行緒上隨時間變化的活動火焰圖。 x 軸表示隨時間的記錄。 每個條形代表一個事件。

更寬的條形意味著該事件花費的時間更長。 y 軸代表呼叫堆疊。 當您看到事件堆疊在一起時，這意味著較高的事件導致較低的事件。

![](https://img-blog.csdnimg.cn/img_convert/c31b6544c4fc93e29acf242ad2ce54e6.png)

recording 中有很多資料。 透過單擊、按住並將滑鼠拖動到“概覽”（包括 FPS、CPU 和 NET 圖表的部分）上，放大單個動畫幀觸發事件。 主要部分和摘要選項卡僅顯示所選 recording 部分的資訊。

請注意 Animation Frame Fired 事件右上角的紅色三角形。 每當您看到紅色三角形時，即表示可能存在與此事件相關的問題的警告。

每當執行 requestAnimationFrame() 回撥時，就會發生 Animation Frame Fired 事件。

![](https://img-blog.csdnimg.cn/img_convert/db52570898029f3c2db11b08850a1267.png)

單擊動畫幀觸發事件。 “摘要”選項卡現在顯示有關該事件的資訊。 注意揭示連結。 單擊它會導致 DevTools 突出顯示啟動 Animation Frame Fired 事件的事件。 另請注意 app.js:94 連結。 單擊它會將您跳轉到原始碼中的相關行。

![](https://img-blog.csdnimg.cn/img_convert/d332825f71d38b4c17cefa057fcf880b.png)

![](https://img-blog.csdnimg.cn/img_convert/c2230b4a5fa1cb6b23fd00463f2f7d29.png)

![](https://img-blog.csdnimg.cn/img_convert/7e04c1208600459fb3c37942365f2b33.png)

```javascript
app.update = function (timestamp) {
    for (var i = 0; i < app.count; i++) {
      var m = movers[i];
      if (!app.optimize) {
        var pos = m.classList.contains('down') ?
            m.offsetTop + distance : m.offsetTop - distance;
        if (pos < 0) pos = 0;
        if (pos > maxHeight) pos = maxHeight;
        m.style.top = pos + 'px';
        if (m.offsetTop === 0) {
          m.classList.remove('up');
          m.classList.add('down');
        }
        if (m.offsetTop === maxHeight) {
          m.classList.remove('down');
          m.classList.add('up');
        }
      } else {
        var pos = parseInt(m.style.top.slice(0, m.style.top.indexOf('px')));
        m.classList.contains('down') ? pos += distance : pos -= distance;
        if (pos < 0) pos = 0;
        if (pos > maxHeight) pos = maxHeight;
        m.style.top = pos + 'px';
        if (pos === 0) {
          m.classList.remove('up');
          m.classList.add('down');
        }
        if (pos === maxHeight) {
          m.classList.remove('down');
          m.classList.add('up');
        }
      }
    }
    frame = window.requestAnimationFrame(app.update);
  }
```

使用鍵盤上下箭頭切換事件的顯示：
![](https://img-blog.csdnimg.cn/img_convert/0923870d7539da6c2ac24f08a4600dba.png)

在 app.update 事件下，有一堆紫色事件。 如果它們更寬，看起來好像每個上面都有一個紅色三角形。 現在單擊紫色佈局事件之一。 DevTools 在摘要選項卡中提供了有關事件的更多資訊。 事實上，有一個關於強制迴流的警告（佈局的另一種說法）。

先選中 app.update, 然後按鍵盤下箭頭，再左右移動，找到這些 forced reflow 的程式碼，同樣可以點選超連結看到引起迴流的準確程式碼行數：

![](https://img-blog.csdnimg.cn/img_convert/3e08a0a940142cf4f1f00f4456db4551.png)

比如第 71 行的 m.offsetTop 引起迴流：

![](https://img-blog.csdnimg.cn/img_convert/a8ed7dcbbf3c6a2946581227f6c97100.png)

這段程式碼的問題在於，在每個動畫幀中，它會更改每個方塊的樣式，然後查詢每個方塊在頁面上的位置。 因為樣式改變了，瀏覽器不知道每個方塊的位置是否改變，所以它必須重新佈局方塊以計算它的位置。 請參閱[避免強制同步佈局](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid_forced_synchronous_layouts)以瞭解更多資訊。

Chrome 開發者工具 performance 標籤頁的用法

相關文章