前言：該篇說明：請見 說明 —— 瀏覽器工作原理與實踐 目錄

　　在分析頁面效能時，如果說 Audits 是道開胃菜，那 Performance 才是正餐，之所以這樣說，主要是因為 Performance 可以記錄站點在執行過程中的效能資料，有了這些效能資料，就可以回放整個頁面的執行過程，這樣就方便定位和診斷每個時間段內頁面的執行情況，從而有效幫助我們找出頁面的效能瓶頸。

　　不同於 Audits，Performance 不會給出效能得分，也不會給出優化建議，它只是單純地採集效能資料，並將採集到的資料按照時間線的方式來展現，我們要做的就是依據原始資料來分析 Web 應用的效能問題。

　　本文主要介紹如何使用 Performance。通常使用 Performance 需要分三步走：

1.  配置 Performance；
2. 生成報告頁；
3. 人工分析報告頁，並找出頁面的效能瓶頸。

　　接下來就根據上面三個步驟來熟悉 Performance，並介紹如何使用 Performance 來分析頁面效能資料。

配置 Performance

 　　在 Chrome 中開啟任意一個站點，在開啟 Chrome 開發者工具，然後選擇 Performance標籤，效果如下：

 Performance 配置頁

 　　上圖就是 Performance 的配置頁，觀察圖中區域 1，我們可以設定該區域中的 “NetWork”來限制網路載入速度，設定“CPU”來限制 CPU 的運算速度。通過設定就可以在 Chrome 瀏覽器上來模擬手機等效能不高的裝置了。在這裡將 CPU 的運算能力降低到 1/6 ，將網路的載入速度設定為 “快的 3G(Fast 3G)” 用來模擬 3G 的網路狀態。

　　不同於 Audits 只能監控載入階段的效能資料，Performance 還可以監控互動階段的效能資料，不過Performance 是分別錄製這兩個階段的，你可以檢視上圖區域 2 和區域3，我們看到這裡有兩個按鈕，上面那個黑色圓圈按鈕是用來記錄互動階段效能資料的，下面那個類似重新整理按鈕用來記錄載入階段的效能資料。

　　另外還要注意一點，這兩種錄製方式稍微有點不同：

• 當錄製載入階段的效能資料時，Performance 會重新重新整理頁面，並等到頁面完全渲染出來後，Performance 就會自動停止錄製； —— 類似重新整理按鈕
• 如果是錄製互動階段的效能時，那麼需要手動停止錄製過程。 —— 實心黑色圓圈按鈕

認識報告頁

　　無論採用哪種方式錄製，最終所生成的報告頁都是一樣的，如下：

 Performance 的報告頁

 　　觀察上圖的報告頁，可以將它分為三個主要的部分，分別為概覽面板、效能指標面板和詳情面板。

　　要熟練掌握這三個面板，需要先明白時間線的概念，這是因為概覽面板和效能指標面板都依賴於時間線。我們知道，Performance 按照時間的順序來記錄每個時間節點的效能資料，然後再按照時間順序來展示這些效能資料，那麼展示的時候就必然要引入時間線了。比如上圖中我們錄製了 10000 毫秒，那麼它的時間線長度也就是 10000 毫秒，體現在上圖中就是概覽面板最上面那條線。

1. 概覽面板

　引入了時間線，Performance 就會將幾個關鍵指標，諸如頁面幀速(FPS)、CPU 資源消耗、網路請求流量、V8 記憶體使用量（堆記憶體）等，按照時間順序做成圖表的形式展現出來，這就是概覽面板，參看上圖。

　　有了概覽面板，就能一覽幾個關鍵的歷史資料指標，進而能快速定位到可能存在問題的時間節點。那麼如何定位可能存在問題的時間節點呢？

• 如果 FPS 圖表上出現了紅色塊，那麼就表示紅色塊附近渲染出一幀所需時間過久，幀的渲染時間過久，就有可能導致頁面卡頓。
• 如果 CPU 圖形佔用面積太大，表示 CPU 使用率就越高，那麼就有可能因為某個 JS 佔用太多的主執行緒時間，從而影響其他任務的執行。
• 如果 V8 的記憶體使用量一直在增加，就有可能是某種原因導致了記憶體洩漏。

　　除了以上指標外，概覽面板還展示載入過程中的幾個關鍵時間節點，如 FP、LCP、DOMContentLoaded、Onload 等事件產生的時間點。這些關鍵時間點體現在了幾條不同顏色的豎線上。

2. 效能面板

　　通常，我們通過概覽面板來定位到可能存在問題的時間節點，接下來需要更進一步的資料，來分析導致該問題的原因，那麼應該怎麼分析呢？

　　這就需要引入效能面板了，在效能面板中，記錄了非常多的效能指標項，比如 Main 指標記錄渲染主執行緒的任務執行過程，Compositor 指標記錄了合成執行緒的任務執行過程，GPU 指標記錄了 GPU 程序主執行緒的任務執行過程。有了這些詳細的效能資料，就可以幫助我們輕鬆地定位到頁面的效能問題。

　　簡而言之，我們通過概覽面板來定位問題的時間節點，然後再使用效能面板分析該時間節點內的效能資料。具體的講，比如概覽面板中的 FPS 圖表中出現了紅色塊，那麼點選該紅色塊，效能面板就定位到該紅色塊的時間節點內了，參考下圖：

 選擇時間線上的一段

　　觀察上圖，發現效能面板的最上方也有一段時間線，比如上面這個時間線所展示的是從 360 毫秒 到 480 毫秒，這段時間就是所定位到的時間節點，下面所展示的 Network、Main 等都是該時間節點內的詳細資料。

　　如果你想要檢視事件範圍更廣的效能指標，你只需要將滑鼠放到時間線上，滾動滑鼠滾輪就可以就行縮放了。如果放大之後，要檢視的內容如果超出了螢幕，那麼你可以點選滑鼠左鍵來拖動時間線，直到找到需要檢視的內容，你也可以通過鍵盤上的 “WASD”四個鍵來進行縮放和位置的移動。

3. 解讀效能面板的各項指標

　　現在瞭解效能面板，它主要用來展現特定時間段內的多種效能指標資料。那麼要分析這些指標資料，我們就要明白這些指標資料的含義，不過要弄明白它們卻並非易事，因為要很好地理解它們，你需要掌握渲染流水線、瀏覽器程序架構、導航流程等知識點。

　　因此在介紹效能指標之前，還需要岔開下，回顧下這些前置的知識點。

　　因為瀏覽器的渲染機制過於複雜，所以渲染模組在執行渲染的過程中會被劃分為很多子階段，輸入的 HTML 資料經過這些子階段，最後輸出螢幕上的畫素，我們把這樣的一個處理流程叫做渲染流水線。一條完整的渲染流水線包括瞭解析HTML 檔案生成 DOM、解析 CSS 生成 CSSOM、執行 JS、樣式計算、構造佈局樹、準備繪製列表、光柵化、合成、顯示等一系列操作。

　　渲染流水線主要是在渲染程序中執行的，在執行渲染流水線的過程中，渲染程序又需要網路程序、瀏覽器程序、GPU等程序配合，才能完成如此複雜的任務。另外在渲染程序內部，又有很多執行緒來相互配合。具體的工作方式參考下圖：

 渲染流水線

　　關於渲染流水線和瀏覽器程序架構的詳細內容在前面的章節中也做了很多介紹，特別是《05 | 渲染流程（上）：HTML、CSS 和 JS，是如何變成頁面的？》和《06 | 渲染流程（下）：HTML、CSS 和 JS，是如何變成頁面的？》這兩節，你可以去回顧下相關章節的課程內容。

　　好了，簡要回顧了渲染流水線和瀏覽器的程序架構，那麼現在回顧正題，來分析下效能面板各個指標項的具體含義。參考下圖：

 效能面板

　　觀看上圖的左邊，我們可以看到它是由很多效能指標項組成的，比如 Network、Frames、Main 等，下面就來一一分析這些效能指標項的含義。

　　我們先看最為重要的 Main 指標，它記錄了渲染程序的主執行緒的任務執行記錄，在 Performance 錄製期間，在渲染主執行緒上執行的所有記錄都可以通過 Main 指標來檢視，你可以通過點選 Main 來展開主程序的任務執行記錄，具體觀察下圖：

 Main 指標

　　觀察上圖，一段段橫條代表執行一個個任務，長度越長，花費的時間越多；豎向代表該任務的執行記錄。通過前面章節的學習，我們知道主執行緒上跑了特別多的任務，諸如渲染流水線的大部分流程，JS 執行、V8 的垃圾回收、定時器設定的回撥任務等等，因此 Main 指標的內容非常多，而且非常重要，所以我們在使用 Performance 的時候，大部分時間都是在分析 Main 指標。Main 指標的內容特別多，我會在下一節對它做詳細分析。

　　通過渲染流水線，我們知道了渲染主執行緒在生成層樹（LayerTree）之後，然後根據層樹生成每一層的繪製列表，我們把這個過程稱為繪製（Paint）。在繪製階段結束之後，渲染主執行緒會將這些繪製列表提交（commit）給合成執行緒，並由合成執行緒合成出來漂亮的頁面。因此，監控合成執行緒的任務執行記錄也相對比較重要，所以 Chrome 又在效能面板中引入 Compositor 指標，也就是合成執行緒的任務執行記錄。

　　在合成執行緒執行任務的過程中，還需要 GPU 程序的配合來生成點陣圖，我們把這個 GPU 生成點陣圖的過程稱為光柵化。如果合成執行緒直接和 GPU 程序進行通訊，那麼勢必會阻塞後面的合成任務，因此合成執行緒又維護了一個光柵化執行緒池（Raster），用來讓 GPU 執行光柵化的任務。因為光柵化執行緒池和 GPU 程序中的任務執行也會影響到頁面的效能，所以效能面板也添加了這兩個指標，分別是 Raster 指標和 GPU 指標。因為 Raster 是執行緒池，所以如果你點開 Raster 項，可以看到它維護了多個執行緒。

　　渲染程序中除了有主執行緒、合成執行緒、光柵化執行緒池外，還維護了一個 IO 執行緒，具體細節可以參考《15 | 訊息佇列和事件迴圈：頁面是怎麼“活”起來的？》這篇文章。該 IO 執行緒主要用來接收使用者輸入事件、網路事件、裝置相關等事件、如果事件需要渲染主執行緒來處理，那麼 IO 執行緒還會將這些事件轉發給渲染主執行緒。在效能面板上，Chrome_ChildIOThread 指標對應的就是 IO 執行緒的任務記錄。

　　好了，以上介紹的都是渲染程序和 GPU 程序的任務記錄，除此之外，效能面板還添加了其他一些比較重要的效能指標。

　　第一個是 Network 指標，網路記錄展示了頁面中的每個網路請求所消耗的時長，並以瀑布流的形式展現。這塊內容和網路面板的瀑布流類似，之所以放在效能面板中是為了方便我們和其他指標對照著分析。

　　第二個是 Timings 指標，用來記錄一些關鍵的時間節點在何時產生的資料資訊，關於這些關鍵時間點的資訊我們在上一節也介紹過了，諸如FP、FCP、LCP 等。

　　第三個是 Frames 指標，也就是瀏覽器生成每幀的記錄，我們知道頁面所展現出來的畫面都是由渲染程序一幀一幀渲染出來的，幀記錄就是用來記錄渲染程序生成所有幀資訊，包括了渲染出每幀的時長、每幀的圖層構造等資訊，你可以點選對應的幀，然後在詳細資訊面板裡面檢視具體資訊。

　　第四個是 Interactions 指標，用來記錄使用者互動操作，比如點選滑鼠、輸入文字等互動資訊。

4. 詳情面板

　　通過效能面板的分析，我們知道了效能面板記錄了多種指標的資料資訊，並且以圖形的形式展現在效能面板上。

　　具體的講，比如主執行緒上執行了解了 HTML(ParserHTML)的任務，對應於效能面板就是一個長條和多個豎條組成圖形。通過上面的圖形我們只能得到一個大致的資訊，如果想要檢視這些記錄的詳細資訊，就需要引入詳情面板了。

　　你可以通過在效能面板中選中效能指標中的任何歷史資料，然後選中記錄的細節資訊就會展現在詳情面板中了。比如我點選了 Main 指標中的 ParserHTML 這個過程，下圖就是詳情面板展現該過程的詳細資訊。

 詳細資訊

　　由於詳情面板所涉及的內容很多，而且每種指標的詳細內容都有所不同，所以本節就不展開來講了。另外你可以去 Google 的官方網站檢視 Performance 的一些 基礎使用資訊。

總結

　　本文的主要內容：

　　本節首先介紹瞭如何去配置 Performance 並生成報告頁，然後我們將焦點放在瞭如何解讀報告頁上。

　　之後介紹了報告頁面主要分為三個部分，概覽面板、效能面板和詳情面板。

　　我們可以通過概覽面板來定位問題的時間節點，然後再使用效能面板分析該時間節點內的效能資料。不過在分析資料時，我們需要弄明白效能面板內各項資料指標的含義，要了解這些，需要了解瀏覽器渲染流水線、瀏覽器的程序架構等知識點，因此結合這些知識點，我們接下來分析了效能面板的各項指標的含義。

　　其中最為重要的是 Main 指標，它記錄了渲染主執行緒上的任務執行情況，不過這塊細節內容會非常多，所以會在下一節來介紹。

　　最後我們還介紹了每個指標項的內容都有詳細資料，這些詳細資料是通過詳細面板來展現，你只需要通過效能面板點選相應的資料，就能通過詳情面板來檢視詳細資料了。不過詳情面板所涉及的資料也是非常多的，所以本文也就沒對詳情面板做多深的介紹了。

　　我把 Performance 比喻成一張網，它能把我們在前面章節中很多知識點都網羅起來，並應用到實踐中。

思考題

　　多找幾個站點，使用 Performance 來錄製載入過程和互動過程，並熟悉報告頁面中的各項效能指標。