Analyze runtime performance

運(yùn)行時(shí)性能是您的頁(yè)面在運(yùn)行時(shí)的表現(xiàn)，而不是加載。 就 RAIL 模型而言，本文介紹的方法對(duì)于分析頁(yè)面的響應(yīng)、動(dòng)畫和空閑階段非常有用。

在隱身模式下打開谷歌瀏覽器。 隱身模式可確保 Chrome 以干凈的狀態(tài)運(yùn)行。 例如，如果您安裝了很多擴(kuò)展，這些擴(kuò)展可能會(huì)在您的性能測(cè)量中產(chǎn)生干擾。

在您的隱身窗口中加載以下頁(yè)面。 這是您要分析的演示。 該頁(yè)面顯示了一堆上下移動(dòng)的藍(lán)色小方塊。

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

Simulate a mobile CPU

移動(dòng)設(shè)備的 CPU 能力遠(yuǎn)低于臺(tái)式機(jī)和筆記本電腦。 每當(dāng)您分析頁(yè)面時(shí)，請(qǐng)使用 CPU 節(jié)流來模擬您的頁(yè)面在移動(dòng)設(shè)備上的表現(xiàn)。

下列選項(xiàng)，CPU 4x slowdown, 模擬出運(yùn)算速度只有當(dāng)前 1/4 的 CPU：

Set up the demo

很難為所有讀者創(chuàng)建一個(gè)始終如一的運(yùn)行時(shí)性能演示。 因此 Google 準(zhǔn)備了一個(gè)允許自定義屏幕上出現(xiàn)元素?cái)?shù)量的 web 應(yīng)用，以確保您的體驗(yàn)與您在本教程中看到的屏幕截圖和描述相對(duì)一致，而不管您的計(jì)算機(jī)的硬件配置如何。

(1) 繼續(xù)單擊 Add 10，直到藍(lán)色方塊的移動(dòng)速度明顯比以前慢。 在高端機(jī)器上，可能需要大約 20 次點(diǎn)擊。

(2) 單擊優(yōu)化。 藍(lán)色方塊應(yīng)該移動(dòng)得更快更平穩(wěn)。

如果您沒有看到優(yōu)化和未優(yōu)化版本之間的明顯差異，請(qǐng)嘗試多次單擊“減去 10”并重試。 如果添加太多藍(lán)色方塊，只會(huì)使 CPU 使用率最大化，并且不會(huì)看到兩個(gè)版本的結(jié)果有很大差異。

Record runtime performance

當(dāng)您運(yùn)行頁(yè)面的優(yōu)化版本時(shí)，藍(lán)色方塊移動(dòng)得更快。 這是為什么？ 兩個(gè)版本都應(yīng)該在相同的時(shí)間內(nèi)將每個(gè)方格移動(dòng)相同的空間。 在性能面板中進(jìn)行錄制，了解如何檢測(cè)未優(yōu)化版本中的性能瓶頸。

點(diǎn)擊 Performance 面板的 Record 圖標(biāo)，開始錄制：

等幾秒鐘后，點(diǎn)擊 Stop:

下面介紹如何解讀 Performances 面板生成的統(tǒng)計(jì)數(shù)據(jù)。

Analyze frames per second

衡量任何動(dòng)畫性能的主要指標(biāo)是每秒幀數(shù) (FPS)。當(dāng)動(dòng)畫以 60 FPS 運(yùn)行時(shí)，意味著較好的用戶體驗(yàn)。

查看 FPS 圖表。 每當(dāng)您看到 FPS 上方的紅色條時(shí)，就意味著幀率下降得太低，可能會(huì)損害用戶體驗(yàn)。 一般來說，綠色條越高，FPS 越高。

如下圖所示，我開啟了 recording，然后重復(fù)點(diǎn)擊 Add 10，在此過程中，能看到代表 FPS 低于 60 的紅線逐漸升高，然后在 CPU 欄，代表 Rendering 的紫色圖例越來越多。

將鼠標(biāo)懸停在 FPS、CPU 或 NET 圖表上。 DevTools 顯示了當(dāng)時(shí)頁(yè)面的屏幕截圖。 左右移動(dòng)鼠標(biāo)可重播錄音。 這稱為擦洗(scrubbing)，它對(duì)于手動(dòng)分析動(dòng)畫的進(jìn)程很有用。

看這個(gè) frames 欄：

在框架部分，將鼠標(biāo)懸停在其中一個(gè)綠色方塊上。 DevTools 會(huì)向您顯示該特定幀的 FPS。 每幀可能遠(yuǎn)低于 60 FPS 的目標(biāo)。

Bonus: Open the FPS meter

我們還可以使用 FPS meter 觀測(cè)一個(gè)網(wǎng)頁(yè)實(shí)時(shí)的 FPS 數(shù)據(jù)。

快捷鍵：Control+Shift+P 選擇 show rendering：

在渲染選項(xiàng)卡中，啟用 FPS Meter。即下圖這個(gè) checkbox：

視口的右上角會(huì)出現(xiàn)一個(gè)新的疊加層。能顯示實(shí)時(shí)的 FPS 數(shù)據(jù)：

我們?cè)?summary 標(biāo)簽頁(yè)里看到，該 web 應(yīng)用的瓶頸在 rendering：

展開 main 部分。 DevTools 會(huì)向您顯示主線程上隨時(shí)間變化的活動(dòng)火焰圖。 x 軸表示隨時(shí)間的記錄。 每個(gè)條形代表一個(gè)事件。

更寬的條形意味著該事件花費(fèi)的時(shí)間更長(zhǎng)。 y 軸代表調(diào)用堆棧。 當(dāng)您看到事件堆疊在一起時(shí)，這意味著較高的事件導(dǎo)致較低的事件。

recording 中有很多數(shù)據(jù)。 通過單擊、按住并將鼠標(biāo)拖動(dòng)到“概覽”（包括 FPS、CPU 和 NET 圖表的部分）上，放大單個(gè)動(dòng)畫幀觸發(fā)事件。 主要部分和摘要選項(xiàng)卡僅顯示所選 recording 部分的信息。

請(qǐng)注意 Animation Frame Fired 事件右上角的紅色三角形。 每當(dāng)您看到紅色三角形時(shí)，即表示可能存在與此事件相關(guān)的問題的警告。

每當(dāng)執(zhí)行 requestAnimationFrame() 回調(diào)時(shí)，就會(huì)發(fā)生 Animation Frame Fired 事件。

單擊動(dòng)畫幀觸發(fā)事件。 “摘要”選項(xiàng)卡現(xiàn)在顯示有關(guān)該事件的信息。 注意揭示鏈接。 單擊它會(huì)導(dǎo)致 DevTools 突出顯示啟動(dòng) Animation Frame Fired 事件的事件。 另請(qǐng)注意 app.js:94 鏈接。 單擊它會(huì)將您跳轉(zhuǎn)到源代碼中的相關(guān)行。

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 事件下，有一堆紫色事件。 如果它們更寬，看起來好像每個(gè)上面都有一個(gè)紅色三角形。 現(xiàn)在單擊紫色布局事件之一。 DevTools 在摘要選項(xiàng)卡中提供了有關(guān)事件的更多信息。 事實(shí)上，有一個(gè)關(guān)于強(qiáng)制回流的警告（布局的另一種說法）。

先選中 app.update, 然后按鍵盤下箭頭，再左右移動(dòng)，找到這些 forced reflow 的代碼，同樣可以點(diǎn)擊超鏈接看到引起回流的準(zhǔn)確代碼行數(shù)：

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

這段代碼的問題在于，在每個(gè)動(dòng)畫幀中，它會(huì)更改每個(gè)方塊的樣式，然后查詢每個(gè)方塊在頁(yè)面上的位置。 因?yàn)闃邮礁淖兞?#xff0c;瀏覽器不知道每個(gè)方塊的位置是否改變，所以它必須重新布局方塊以計(jì)算它的位置。 請(qǐng)參閱避免強(qiáng)制同步布局以了解更多信息。

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的Chrome 开发者工具 performance 标签页的用法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。