摘要：原文地址開始在本教程中，你將學(xué)會(huì)如何使用性能分析工具分析頁面上的性能瓶頸。其中包含了捕獲性能指標(biāo)相關(guān)的設(shè)置。參考分析優(yōu)化版的性能使用剛剛學(xué)習(xí)的工作流和工具，單擊演示中的優(yōu)化以啟用優(yōu)化的代碼，進(jìn)行另一次性能記錄，然后分析結(jié)果。

原文地址：https://developers.google.com...

在本教程中，你將學(xué)會(huì)如何使用性能分析工具分析頁面上的性能瓶頸。

在隱身模式下打開Google Chrome。隱身模式確保Chrome在干凈的狀態(tài)下運(yùn)行。例如，如果你安裝了很多擴(kuò)展，這些擴(kuò)展可能會(huì)影響到性能分析的結(jié)果。

在隱身窗口中加載以下頁面。這是本教程的Demo，頁面顯示了一堆上下移動(dòng)的藍(lán)色小方塊。

https://googlechrome.github.i...

接著按 F12 打開 DevTools。

圖1: Demo 在左側(cè)，DevTools在右側(cè)。

注意：為了保證更好的閱讀體驗(yàn)，在后續(xù)的截圖中，DelTools分到多帶帶的窗口顯示。

移動(dòng)設(shè)備的CPU算力比臺(tái)式機(jī)和筆記本電腦小得多。無論何時(shí)評(píng)測(cè)頁面，都可以使用CPU調(diào)節(jié)來模擬頁面在移動(dòng)設(shè)備上的表現(xiàn)。

在DevTools中，單擊 Performance 選項(xiàng)卡。

確保選中了 Screenshots 。

單擊 Capture Settings（設(shè)置按鈕）。其中包含了捕獲性能指標(biāo)相關(guān)的設(shè)置。

對(duì)于 CPU選項(xiàng)，選擇 2x slowdown。DevTools會(huì)進(jìn)行 CPU 節(jié)流，使其比平時(shí)慢2倍。

圖2: CPU 節(jié)流，藍(lán)色框區(qū)域

注意：在測(cè)試其他頁面時(shí)，如果要確保它們?cè)诘投艘苿?dòng)設(shè)備上工作良好，請(qǐng)將CPU節(jié)流設(shè)置為減速20倍。這個(gè)演示不能很好地使用20倍的減速，所以它只使用2倍的減速作為教學(xué)目的。

很難為本網(wǎng)站的所有讀者創(chuàng)建一致的運(yùn)行時(shí)性能演示。本節(jié)允許你自定義演示，以確保你的體驗(yàn)與你在本教程中看到的屏幕截圖和描述相對(duì)一致，而不管你的特定設(shè)置如何。

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

單擊 Optimize，藍(lán)色方塊應(yīng)該移動(dòng)得更快更流暢。

單擊 Un-Optimize，藍(lán)色方塊應(yīng)該移動(dòng)得更慢且更加卡頓

注意：如果你看不到優(yōu)化版本和未優(yōu)化版本之間的明顯差異，請(qǐng)嘗試單擊 Subtract 10 幾次，然后再試一次。如果你添加太多的藍(lán)色方塊，相當(dāng)于把CPU都幾乎占滿了，就看不到優(yōu)化和不優(yōu)化版本的差異。

當(dāng)你運(yùn)行優(yōu)化版本時(shí)，藍(lán)色方塊移動(dòng)得更快。為什么？?jī)蓚€(gè)版本都應(yīng)該在相同的時(shí)間內(nèi)，將每個(gè)方塊移動(dòng)相同的距離。在性能面板中錄制，學(xué)習(xí)如何檢測(cè)未優(yōu)化版本中的性能瓶頸。

在 DevTools 中，單擊 Record（左上角灰色圓圈）。DevTools 會(huì)捕捉頁面運(yùn)行時(shí)的性能指標(biāo)。

圖3：頁面記錄中

等待幾秒

單擊 Stop，DevTools 停止記錄，分析數(shù)據(jù)，然后會(huì)將分析結(jié)果展示在性能面板中。

圖4：分析的結(jié)果

哇，這么多的數(shù)據(jù)。別慌，很快我們就知道具體的含義了。

一旦你拿到了頁面的性能分析數(shù)據(jù)，你會(huì)發(fā)現(xiàn)這個(gè)頁面的性能到底有多差，并且找到導(dǎo)致頁面性能差的原因。

衡量任何動(dòng)畫性能的主要指標(biāo)就是幀率(FPS)。當(dāng)動(dòng)畫以60 fps的速度運(yùn)行時(shí)，用戶會(huì)很爽。

注意FPS圖表。只要你看到一條紅條，就意味著低幀率，進(jìn)而影響用戶體驗(yàn)。通常來說，綠色的柱條越高，代表幀率越高。

圖5：藍(lán)框內(nèi)的FPS圖表

在FPS圖表下方，你可以看到CPU圖表。CPU圖表中的顏色與“性能”面板底部的 Summary 選項(xiàng)卡中的顏色相對(duì)應(yīng)。CPU 圖表充滿顏色意味著CPU在記錄過程中達(dá)到了最大負(fù)載。每當(dāng)你看到CPU長(zhǎng)時(shí)間達(dá)到最大負(fù)載時(shí)，這是進(jìn)行優(yōu)化的一個(gè)很好的提示。

圖6：藍(lán)框內(nèi)的 CPU 圖表和 Summary（摘要欄）

將鼠標(biāo)懸停在 FPS、CPU 或 NET 圖表上。DevTools 顯示該頁面在該時(shí)間點(diǎn)的屏幕截圖。向左和向右移動(dòng)鼠標(biāo)以重放記錄過程。這稱為 scrubbing，它對(duì)于手動(dòng)分析動(dòng)畫過程很有用。

圖7：查看頁面在2000ms左右時(shí)的屏幕截圖

在 Frames 區(qū)域中，將鼠標(biāo)懸停在其中一個(gè)綠色方塊上。DevTools 向你顯示該特定幀的 FPS。每幀可能遠(yuǎn)遠(yuǎn)低于60 FPS。

圖8：鼠標(biāo)懸停在一幀上

當(dāng)然，在這個(gè) DEMO 中，很明顯這個(gè)頁面的性能不是很好。但是在真實(shí)的場(chǎng)景中，我們不一定能一眼分辨出一個(gè)頁面的性能好壞，所以使用這些工具來進(jìn)行測(cè)量分析是很方便的。

現(xiàn)在你已經(jīng)測(cè)量并驗(yàn)證了頁面動(dòng)畫表現(xiàn)不佳，接下來要回答的問題是：為什么？

注意 Summary 選項(xiàng)卡，在未選擇任何事件時(shí)，它呈現(xiàn)了瀏覽器在整個(gè)記錄過程中把時(shí)間花在哪個(gè)部分?？梢钥吹剑撁娴拇蟛糠謺r(shí)間都花在渲染上。所以現(xiàn)在的目標(biāo)就是：減少瀏覽器花費(fèi)在渲染工作上的時(shí)間。

圖9：藍(lán)框內(nèi)的 Summary 選項(xiàng)卡

展開 Main 區(qū)域，DevTools 向你展示了一段時(shí)間內(nèi)主線程上活動(dòng)圖。x 軸代表著這段時(shí)間內(nèi)的記錄，每一個(gè) Bar 都代表了一個(gè)事件。Bar 越寬，意味著該活動(dòng)花費(fèi)的時(shí)間更長(zhǎng)。y軸表示調(diào)用堆棧，當(dāng)你看到事件堆疊在一起時(shí)，這意味著上面的事件導(dǎo)致了下面的事件。

圖10：藍(lán)框內(nèi)的 Main 區(qū)域

記錄過程中有很多數(shù)據(jù)。在 OverView 面板（有 CPU, FPS, NET 圖表的區(qū)域）上，用鼠標(biāo)單擊、按住、拖拽來放大單個(gè) Animation Frame Fired 事件。此時(shí) Main 和 Summary 中展示了選中的區(qū)間的相關(guān)信息。

圖11：放大單個(gè) Animation Frame Fired 事件

提示：你也可以通過單擊 Main 中的某個(gè)事件后，通過鼠標(biāo)的滾輪或者 W,S,A,D 鍵實(shí)現(xiàn)單個(gè)事件的縮放。

注意在 Animation Frame Fired 事件右上角的紅三角。只要你看到了紅三角，這個(gè)事件就可能造成嚴(yán)重的問題。

提示：每當(dāng) requestAnimationFrame()  回調(diào)調(diào)用時(shí), 都會(huì)觸發(fā) Animation Frame Fired 事件

單擊某個(gè) Animation Frame Fired 事件, Summary 中會(huì)展示與該事件相關(guān)的信息. 注意 reveal 鏈接，單擊后，DevTools 會(huì)將觸發(fā)當(dāng)前的 Animation Frame Fired 事件的事件高亮出來。同時(shí)注意 app.js:94 鏈接，單擊后跳轉(zhuǎn)到相應(yīng)的源碼。

圖12： 查看 Animation Frame Fired 事件的詳細(xì)信息

提示：選中一個(gè)事件之后，用左右方向鍵可以跳轉(zhuǎn)到上/下一個(gè)事件

在 app.update 事件下，有一堆紫色事件。稍微放大，看起來每個(gè)都可能有一個(gè)紅色的三角形?，F(xiàn)在單擊其中一個(gè)紫色事件。DevTools 在 Summary 中提供了有關(guān)事件的詳細(xì)信息?？梢钥吹?，有一個(gè)關(guān)于強(qiáng)制回流(forced reflows)的警告(也就是 Layout 的另一種說法)。

在 Summary 中，單擊 Layout Forced 下的 app.js:70 鏈接，DevTools 會(huì)跳轉(zhuǎn)到引發(fā)強(qiáng)制回流的源代碼。

圖13：導(dǎo)致強(qiáng)制回流的源代碼

注意：這行代碼的問題在于：修改了藍(lán)塊樣式之后，立刻讀取藍(lán)塊 offsetTop 值。此時(shí)樣式變更，而offsetTop 值是上一幀的值，瀏覽器為了保證讀取 offsetTop 值的準(zhǔn)確性，會(huì)先處理樣式變更，然后重新布局以計(jì)算準(zhǔn)確的 offsetTop 值，而重新布局（回流）的性能開銷是很大的。參考：Avoid_forced_synchronous_layouts

使用剛剛學(xué)習(xí)的工作流和工具，單擊演示中的優(yōu)化以啟用優(yōu)化的代碼，進(jìn)行另一次性能記錄，然后分析結(jié)果。從改進(jìn)的幀率到 Main 中的活動(dòng)圖表中事件的減少，你可以看到應(yīng)用程序的優(yōu)化版本做的工作少得多，從而帶來更好的性能。

app.update = function (timestamp) {
    for (var i = 0; i < app.count; i++) {
      var m = movers[i];
      if (!app.optimize) { // 1.普通版本
        var pos = m.classList.contains("down") ?
            m.offsetTop + distance : m.offsetTop - distance; // 讀取offsetTop, 變更樣式
        if (pos < 0) pos = 0;
        if (pos > maxHeight) pos = maxHeight;
        m.style.top = pos + "px";
        if (m.offsetTop === 0) { // 樣式變更后讀取 offsetTop，導(dǎo)致回流
          m.classList.remove("up");
          m.classList.add("down");
        }
        if (m.offsetTop === maxHeight) { // 樣式變更后讀取 offsetTop，導(dǎo)致回流
          m.classList.remove("down");
          m.classList.add("up");
        }
      } else { // 2.優(yōu)化版本
        var pos = parseInt(m.style.top.slice(0, m.style.top.indexOf("px")));
        m.classList.contains("down") ? pos += distance : pos -= distance; // 通過讀取top，來獲取原來藍(lán)塊的位置，避免讀取 offsetTop 
        if (pos < 0) pos = 0;
        if (pos > maxHeight) pos = maxHeight;
        m.style.top = pos + "px";
        if (pos === 0) { // 樣式變更后用從樣式 top 中讀取到的位置信息進(jìn)行判斷，避免讀取 offsetTop
          m.classList.remove("up");
          m.classList.add("down");
        }
        if (pos === maxHeight) {
          m.classList.remove("down");
          m.classList.add("up");
        }
      }
    }
    frame = window.requestAnimationFrame(app.update);
  }

注意：優(yōu)化版本的代碼雖然不會(huì)觸發(fā)回流(Layout)，但依然會(huì)觸發(fā)重繪(Paint)。一個(gè)更好的解決方案是使用只會(huì)觸發(fā)合成(Composite)的屬性，例如： transform 和 opacity。
參考： Use transform and opacity changes for animations

了解性能的基礎(chǔ)是軌道模型(The RAIL model)。這個(gè)模型告訴你對(duì)你的用戶來說最重要的性能指標(biāo)。有關(guān)詳細(xì)信息，請(qǐng)參見 Measure Performance With The RAIL Model 。

為了讓性能面板更舒適，熟能生巧。嘗試分析自己的頁面并分析結(jié)果。如果你對(duì)結(jié)果有任何疑問，去Stack Overflow 提出關(guān)于 google-chrome-devtools 的問題。如果可能，包括可復(fù)制頁面的截圖或鏈接。

要真正掌握運(yùn)行時(shí)性能，你必須了解瀏覽器如何將HTML、CSS和JS轉(zhuǎn)換為屏幕上的像，可以參考： Rendering Performance Overview. 這篇文章則更加深入：The Anatomy Of A Frame

最后，有許多方法可以提高運(yùn)行時(shí)性能。本教程將重點(diǎn)放在一個(gè)特定的動(dòng)畫瓶頸上，讓你通過性能面板進(jìn)行重點(diǎn)介紹，但這只是你可能遇到的眾多瓶頸之一。如何提升頁面運(yùn)行時(shí)的性能還可以參考以下關(guān)于渲染性能的文章：

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