[譯] React Profiler 介紹

CoderMing發表於2019-03-04

原文地址：Introducing the React Profiler
原文作者：Brian Vaughn
譯文出自：掘金翻譯計劃
本文永久連結：github.com/xitu/gold-m…
譯者：CoderMing
校對者：CoolRice

React 16.5 新增了對新的 profiler DevTools 外掛的支援。這個外掛使用 React 的 Profiler 實驗性 API 去收集所有 component 的渲染時間，目的是為了找出你的 React App 的效能瓶頸。它將會和我們即將釋出的時間片特性完全相容。（譯者注：可以參考 Dan 在第一屆中國 React 開發者大會上的視訊）

這篇博文包括以下的話題：

Profile 一個 APP

DevTools 將會對支援新的 profiling API 的 APP 新加一個 “Profiler” tab 列：

Note：react-dom 16.5+ 在 DEV 模式下才支援 Profiling，同時生產環境下也可以通過一個 profiling bundle react-dom/profiling 來支援。請在 fb.me/react-profi… 上檢視如何使用這個 bundle。

這個 “Profiler” 的皮膚在剛開始的時候是空的。你可以點選 record 按鈕來啟動 profile：

當你開始記錄之後，DevTools 將會自動收集你 APP 在（啟動之後）每一刻的效能資料。（在記錄期間）你可以和平常一樣使用你的 APP，當你完成 profile 之後，請點 “Stop” 按鈕。

如果你的 APP 在 profile 期間重新渲染了幾次，DevTools 將會提供好幾種方法去檢視效能資料。我們將會在接下來討論它們。

檢視效能資料

瀏覽 commits

從概念上講，React 的執行分為兩個階段：

在 render 階段會確定例如 DOM 之類的資料需要做那些變化。在這個階段，React 將會執行（各個元件的）render 方法，之後會計算出和呼叫 render 方法之前有哪些變化。
commit 階段是 React 提交任何更改所在的階段（在 React DOM 下，就是指 React 新增、修改和移除 DOM 節點的時候）。同時在這個階段，React 會執行像 componentDidMount 和 componentDidUpdate 這類周期函式。

（譯者注：此處可參考 React.js 小書第 18-20 篇）

profiler DevTools 是在 commit 階段收集效能資料的。各次 commit 會被展示在介面頂部的條形圖中：

在條形圖中，每一列都表示單次的 commit 資料，你當前選中的 commit 列會變成黑色。你可以點選各個列（或者是左/右切換按鈕）來檢視不同的 commit 資料。

這些列的顏色和高度對應著該次 commit 在渲染上所花的時間（較高、偏黃的列會比較矮、偏藍的列花費的時間多）。

篩選 commits

你 profile 的記錄時間越長，渲染次數就會越多。有時候你或許會被過多的（價值低的）commit 記錄干擾。為了幫助你解決這個問題，profiler 提供了一個篩選功能。用它來制定一個時間閥值，之後 profiler 會隱藏所有比這個閥值更快的 commit。

火焰圖

（譯者注：阮一峰：如何讀懂火焰圖？）

火焰圖會展示你所指定的那一次 commit 的資訊。圖中每一列都代表了一個 React component（例如下圖中的 App、Nav）。各列的尺寸和顏色表示這列所代表的 component 及其 children 的渲染時間（列的寬度表示該 component 最近一次渲染所花費的時間，列的顏色代表在該次 commit 中渲染所花費的時間）。

Note：
列的寬度表示 component（和它的 children）最近一次渲染所花費的時間。如果這個 component 在本次 commit 中沒有被重新渲染，那其所展示的時間表示上一次 render 的耗時。一個列越寬，其所代表的 component 渲染耗時就越長。
列的顏色表示在本次 commit 中該 component（和它的 children）所花費的時間。黃色代表耗時較長、藍色代表耗時較短，灰色代表該 component 在這次 commit 中沒有被（重新）渲染。

舉個例子，上圖中所展示的 commit 總共渲染耗時為 18.4 ms。Router component 是渲染成本“最昂貴”的 component（花費了 18.4 ms）。他所花費的時間大部分在兩個 children 上：Nav（8.4 ms）和 Route (7.9 ms)。剩下的時間用於它的其他 children 和它自身的渲染。

你可以通過點選 component 列來放大或縮小火焰圖：

點選一個 component 的同時也會選中它，它的具體資訊將會展示在右邊的資料列，列裡會展示該 component 在這次 commit 時的 props 和 state。你可以去深入研究這些資料來找出這次 commit 具體做了哪些。

某些情況下，選中一個 component 後在不同的 commit 之間切換也可以發現觸發這次渲染的原因：

上圖表示在兩次 commit 中 state.scrollOffset 被改變了。這或許就是觸發 List component 重繪的原因。

排序圖

同火焰圖一樣，排序圖也會展示你所指定的那一次 commit 的資訊，圖中每一列都代表了一個 React component（例如下圖中的 App、Nav）。不同的是排序圖是有順序的，耗時最長的 component 會展示在第一行。

Note：
一個 component 的渲染時間也包括了它的 children 們消耗的時間，所以渲染耗時最長的 component 通常距離樹頂部最近。

和火焰圖一樣，你可以通過點選 component 列來放大或縮小排序圖（譯者注：排序圖只會展示在本次 commit 中被觸發重繪的 component）。

Component 圖

在你 profile 的過程中，使用該圖檢視單一 component（在多次 commit 中）的渲染時間有時候是非常有用的。Component 圖會以一個列的形式展示，其中每一列都表示你所選擇的 component 的某一次 commit 下的渲染時間。每列高度和顏色都表示該 component 在某次 commit 中同其它元件的耗時對比。