React性能分析利器來了，媽媽不再用擔憂個人React應用慢了

Profiler

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

官方博客

如何使用

在Chrome的開發工具插件react devtool中多了一個Profiler的tab，點擊能夠切換到Profiler界面

在你使用React16.5以後的版本中，開發時默認開啓Profiler功能，要想在正是環境也使用這個功能，能夠看這裏

默認打開Profiler什麼都沒有，要點擊錄製按鈕進行記錄（跟chrome的performance挺像）。

在你開始錄製以後你能夠進行一些你想分析的操做，而後再點擊stop來中止錄製，就能夠獲得錄製的內容

錄製內容分析

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

1. render階段判斷哪些變動須要被處理成DOM，也就是比較上一次渲染的結果和新的更新
2. commit階段React最終達成全部變動（也就是從js對象到DOM的更新），而且會調用componentDidMount和componentDidUpdate這些生命週期方法

開發工具中經過commit階段對性能數據進行編組，會顯示在右側工具欄上

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

刪選commits

能夠經過commits分組左邊的設置圖標點擊出現的對話框設置刪選選項，能夠設置：

1. 執行時間少於多少的不展現
2. 是否顯示原聲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學習。更多的文章看這裏