Day25-React 效能优化篇-下篇(介绍 React Profiler)

在这篇文章中，将会介绍 React 提供的 Profiler API。

介绍 React Profiler

这个 API 会去收集每个元件在渲染时花费的时间，透过收集结果找到效能瓶颈（花最多时间进行渲染的元件）便可以进行优化。只要下载 React Developer Tools，就可以使用 profiler 并且拿到收集的结果了。

使用范例

1. 下载 React Developer Tools 并打开开发人员工具
2. 找到 Profiler 的 tab 後，要确认一下它是在可以执行的环境，可看下图

注意: Profiler 只能在开发者环境使用。

3. 点击 record，然後在网页做一些想检测的操作，结束後按下 stop
4. 最後就会出现检测的结果，以下执行一个小范例做示范

右上角的长条图数量代表的是 React 总共更新了几次 DOM 元素(Commit 次数)，而每一个直条就代表一次更新，然後直条的颜色/长度代表该次更新花费的时间，越长/黄的直条表示该次更新花费的时间越长，越短/蓝的则相反。

而下方多个横条图的区块称作"火焰图"，每一个横条为一个元件，若为灰色表示这个元件在该次更新没有重新渲染，若不是灰色则表示有重新渲染，越接近黄色代表重新渲染所花费的时间越久，越接近蓝色则反之。横条由上而下的排序方式是从父元件到子元件一层层排下来。

点击上述的长条都可以在右侧栏看到详细的资讯。

在 devtools 的火焰图 icon 旁边有一个 rank 的图示，点进去可以切换成"排行图"，横条由上而下的排序方式是从花费越多时间渲染的元件到花越少时间的元件。

而点击右上的齿轮(红圈)还可以进行其他的设定，有兴趣可以自行深入研究。

若要了解检测後要如何针对耗时比较多的元件去做优化，这里推荐一个 youtube 影片，教你如何用 React Profiler 去优化效能:

How to use the React Profiler to find and fix Performance Problems

Profiler 元件介绍

除了上面提到在 React Developer Tools 里的 Profiler，React 官网也介绍了另一个测量元件渲染的 Profiler 元件，这个元件用来测量指定部分元件渲染时消耗的时间，会接收两个 prop，一个是 id，另一个 onRender 是指定观测的元件更新时会被调用的 callback function。

范例:

// import
import React, { Profiler } from "react";

// 包覆住想要观测的元件
return (
  <App>
    <Profiler id="Main" onRender={onRenderCallback}>
      <Main {...props} />
    </Profiler>
  </App>
);

当测量的元件完成渲染时，会呼叫 onRender 的 callback function 并得到许多的资讯，详细结果范例如下，这些在官网文件也能找到:

const onRenderCallback = (id, phase, actualTime, baseTime, startTime, commitTime) => {
  console.log(`${id}'s ${phase} phase:`);
  console.log(`Actual time: ${actualTime}`);
  console.log(`Base time: ${baseTime}`);
  console.log(`Start time: ${startTime}`);
  console.log(`Commit time: ${commitTime}`);
};

// Main's mount phase:
// Actual time: 7.499999995867256
// Base time: 7.1249999981955625
// Start time: 384888.51500000054
// Commit time: 384897.5449999998

// Main's update phase:
// Actual time: 0.3500000038766302
// Base time: 7.075000001175795
// Start time: 385115.2050000001
// Commit time: 385116.22499999974

补充: Profiler 一样不能在 production 环境使用。

参考资料

如何优化你的 React App

Profiling Performance of React Apps using React Profiler