Analyze runtime performance
運作時性能是您的頁面在運作時的表現，而不是加載。 就 RAIL 模型而言，本文介紹的方法對于分析頁面的響應、動畫和空閑階段非常有用。
在隐身模式下打開谷歌浏覽器。 隐身模式可確定 Chrome 以幹淨的狀态運作。 例如，如果您安裝了很多擴充，這些擴充可能會在您的性能測量中産生幹擾。
在您的隐身視窗中加載以下頁面。 這是您要分析的示範。 該頁面顯示了一堆上下移動的藍色小方塊。
https://googlechrome.github.io/devtools-samples/jank/Simulate a mobile CPU
移動裝置的 CPU 能力遠低于桌上型電腦和筆記本電腦。 每當您分析頁面時，請使用 CPU 節流來模拟您的頁面在移動裝置上的表現。
下列選項，CPU 4x slowdown, 模拟出運算速度隻有目前 1/4 的 CPU：
Set up the demo
很難為所有讀者建立一個始終如一的運作時性能示範。 是以 Google 準備了一個允許自定義螢幕上出現元素數量的 web 應用，以確定您的體驗與您在本教程中看到的螢幕截圖和描述相對一緻，而不管您的計算機的硬體配置如何。
(1) 繼續單擊 Add 10，直到藍色方塊的移動速度明顯比以前慢。 在高端機器上，可能需要大約 20 次點選。
(2) 單擊優化。 藍色方塊應該移動得更快更平穩。
如果您沒有看到優化和未優化版本之間的明顯差異，請嘗試多次單擊“減去 10”并重試。 如果添加太多藍色方塊，隻會使 CPU 使用率最大化，并且不會看到兩個版本的結果有很大差異。
Record runtime performance
當您運作頁面的優化版本時，藍色方塊移動得更快。 這是為什麼？ 兩個版本都應該在相同的時間内将每個方格移動相同的空間。 在性能面闆中進行錄制，了解如何檢測未優化版本中的性能瓶頸。
點選 Performance 面闆的 Record 圖示，開始錄制：
下面介紹如何解讀 Performances 面闆生成的統計資料。
Analyze frames per second
衡量任何動畫性能的主要名額是每秒幀數 (FPS)。當動畫以 60 FPS 運作時，意味着較好的使用者體驗。
檢視 FPS 圖表。 每當您看到 FPS 上方的紅色條時，就意味着幀率下降得太低，可能會損害使用者體驗。 一般來說，綠色條越高，FPS 越高。
如下圖所示，我開啟了 recording，然後重複點選 Add 10，在此過程中，能看到代表 FPS 低于 60 的紅線逐漸升高，然後在 CPU 欄，代表 Rendering 的紫色圖例越來越多。
在架構部分，将滑鼠懸停在其中一個綠色方塊上。 DevTools 會向您顯示該特定幀的 FPS。 每幀可能遠低于 60 FPS 的目标。
Bonus: Open the FPS meter
我們還可以使用 FPS meter 觀測一個網頁實時的 FPS 資料。
快捷鍵：Control+Shift+P 選擇 show rendering：
展開 main 部分。 DevTools 會向您顯示主線程上随時間變化的活動火焰圖。 x 軸表示随時間的記錄。 每個條形代表一個事件。
更寬的條形意味着該事件花費的時間更長。 y 軸代表調用堆棧。 當您看到事件堆疊在一起時，這意味着較高的事件導緻較低的事件。
recording 中有很多資料。 通過單擊、按住并将滑鼠拖動到“概覽”（包括 FPS、CPU 和 NET 圖表的部分）上，放大單個動畫幀觸發事件。 主要部分和摘要頁籤僅顯示所選 recording 部分的資訊。
請注意 Animation Frame Fired 事件右上角的紅色三角形。 每當您看到紅色三角形時，即表示可能存在與此事件相關的問題的警告。
每當執行 requestAnimationFrame() 回調時，就會發生 Animation Frame Fired 事件。
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);
}
使用鍵盤上下箭頭切換事件的顯示：
在 app.update 事件下，有一堆紫色事件。 如果它們更寬，看起來好像每個上面都有一個紅色三角形。 現在單擊紫色布局事件之一。 DevTools 在摘要頁籤中提供了有關事件的更多資訊。 事實上，有一個關于強制回流的警告（布局的另一種說法）。
先選中 app.update, 然後按鍵盤下箭頭，再左右移動，找到這些 forced reflow 的代碼，同樣可以點選超連結看到引起回流的準确代碼行數：
比如第 71 行的 m.offsetTop 引起回流：