Profiler

React16.5正式在devtool中加入了Profiler功能，用於收集每次變更導致的渲染時間，幫助開發者發現潛在的效能問題，有助於開發更高效能的React應用

官方部落格

如何使用

在Chrome的開發工具外掛react devtool中多了一個Profiler的tab，點選可以切換到Profiler介面

在你使用React16.5之後的版本中，開發時預設開啟Profiler功能，要想在正是環境也使用這個功能，可以看這裡

預設開啟Profiler什麼都沒有，要點選錄製按鈕進行記錄（跟chrome的performance挺像）。

在你開始錄製之後你可以進行一些你想分析的操作，然後再點選stop來停止錄製，就可以得到錄製的內容

錄製內容分析

首先要了解一點，React在16版本之後處理任務分為兩個階段：

render階段判斷哪些變更需要被處理成DOM，也就是比較上一次渲染的結果和新的更新
commit階段React最終達成所有變更（也就是從js物件到DOM的更新），並且會呼叫componentDidMount和componentDidUpdate這些生命週期方法

開發工具中通過commit階段對效能資料進行編組，會顯示在右側工具欄上

看上去像一個柱狀圖，每一個柱子代表一次commit，他的顏色和高度對應執行時長，越高顏色越黃代表時間越長，反之越短。

刪選commits

可以通過commits分組左邊的設定圖示點選出現的對話方塊設定刪選選項，可以設定：

執行時間少於多少的不展示
是否顯示原聲DOM渲染的時間

火焰圖

火焰圖部分會以一個類似樹形的結構顯示一次commit過程中整個每個元件的渲染資訊，跟commit分組資訊類似，顏色和長短對應這個元件的渲染耗時，當然元件的渲染時間需要依賴他的子元件的渲染時間。

上圖中可見Router元件渲染時間最長，也基本等於Nav和Route的渲染時間之和，因為子元件的渲染最終肯定會被計算在父元件的渲染時間內。

你可以點選任何一個元件來檢視他的詳細資訊

點選一個元件還可以檢視他的props和state

有些時候你選中一個元件，在commits分組中進行切換，在state和props皮膚會有內容變化的提示

排名檢視

選中火焰圖邊上的排名檢視，會展示該次commit中元件渲染時間由高到低的排名，方便刪選最長時間的渲染。

元件檢視

如果你需要檢視在你進行錄製的過程中，某個元件被渲染了多少次，每次所用的時間，那麼這個檢視就是為你準備的。

一看像一個柱狀圖，每一條代表一次渲染，長度和顏色代表時間的長短。

你可以通過雙擊一個元件，或者選中一個元件，點選右上角的圖示來開啟該檢視。

互動？（Interactions不知道怎麼翻譯好）

在之前React已經發布了一組實驗API來追蹤更新的原因，使用這個API的資訊也會在devtool中展示

途中四個綠點就是呼叫API的節點對應的commit，同時你也可以在火焰圖的commit資訊中看到在這個commit存在的活動追蹤

你可以在互動和commits之間進行切換通過點選對應的資訊

順帶提一下，這個API通過scheduler這個包使用

import { unstable_trace as trace } from "schedule/tracing"

class MyComponent extends Component {
  handleLoginButtonClick = event => {
    trace("Login button click", performance.now(), () => {
      this.setState({ isLoggingIn: true });
    });
  };

  // render ...
}
複製程式碼

更詳細的使用可以看這裡

最後

這個功能非常棒，它能夠讓開發者非常直觀的看到他的每次操作帶來的元件渲染消耗，能夠很方便幫助開發者發現一些不必要的渲染。

其實在React開發中一些小細節可能會給整個應用的效能開銷帶來很大的影響，只是現在的瀏覽器太強大以及大部分應用都處於效能過剩的情況下，所以效能問題不是特別明顯。

在原文的最後有一個視訊展示瞭如何利用Profiler幫助發現效能問題並優化的案例，大家都可以看一下。

我是Jocky，一個專注於React技巧和深度分析的前端工程師，React絕對是一個越深入學習，越能讓你覺得他的設計精巧，思想超前的框架。關注我獲取最新的React動態，以及最深度的React學習。更多的文章看這裡

React效能分析利器來了，媽媽再也不用擔心我的React應用慢了