分析 React 组件的渲染性能

小鱼儿 2023-02-20 03:20 14阅读 0赞

今天，我们介绍一下如何使用 `React Profiler API` 分析 `React` 组件的渲染性能。

![format_png][]

出于演示目的，我们将使用一个电影排队 APP 。

## The React Profiler API ##

`React Profiler API` 会分析渲染和渲染成本，以帮助识别应用程序中卡顿的原因。

import React, { Fragment, unstable_Profiler as Profiler} from "react";

`Profiler` 接受一个 `onRender` 回调函数，当被分析的渲染树中的组件提交更新时，就会调用它。

const Movies = ({ movies, addToQueue }) => (
      <Fragment>
        <Profiler id="Movies" onRender={callback}>

为了进行测试，让我们尝试使用 `Profiler` 来测量 `Movies` 组件各部分的渲染时间：

![format_png 1][]

`Profiler` 的 `onRender` 回调接收描述渲染内容和所花费时间的参数:

*  `id`: 生提交的 Profiler 树的 id。如果有多个 profiler，它能用来分辨树的哪一部分发生了“提交”。
 *  `phase`: "mount" (首次挂载) 或 "update" (重新渲染)，判断是组件树的第一次装载引起的重渲染，还是由 props、state 或是 hooks 改变引起的重渲染。
 *  `actualDuration`: 次更新在渲染 `Profiler` 和它的子代上花费的时间。
 *  `baseDuration`: 在 `Profiler` 树中最近一次每一个组件 `render` 的持续时间。这个值估计了最差的渲染时间。
 *  `startTime`: 本次更新中 React 开始渲染的时间戳。
 *  `commitTime`:  本次更新中 React commit 阶段结束的时间戳。在一次 commit 中这个值在所有的 profiler 之间是共享的，可以将它们按需分组。
 *  `interactions`: 当更新被制定时，“interactions” 的集合会被追踪。

const callback = (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}`);
    }

我们可以加载页面，然后打开 `Chrome DevTools` 控制台，查看下面的时间：

![format_png 2][]

我们还可以打开 `React DevTools` ，转到 `Profiler` 选项卡并可视化我们的组件渲染时间。下面是火焰图视图：

![format_png 3][]

我也喜欢使用排名视图，该视图已排序，因此渲染时间最长的组件显示在顶部：

![format_png 4][]

也可以使用多个 `Profiler` 来测量应用程序的不同部分：

import React, { Fragment, unstable_Profiler as Profiler} from "react";
    
    render(
      <App>
        <Profiler id="Header" onRender={callback}>
          <Header {...props} />
        </Profiler>
        <Profiler id="Movies" onRender={callback}>
          <Movies {...props} />
        </Profiler>
      </App>
    );

但是，如果要追踪交互行为怎么办？

## 交互跟踪API ##

如果我们可以追踪交互行为（例如单击UI）来回答比如 “单击此按钮需要多长时间才能更新DOM？” 之类的问题，那就太强大了。感谢 `Brian Vaughn`， `React` 通过新的调度器包中的交互跟踪API对交互跟踪提供了实验支持。这里有更详细的记录。

交互带有一个注释（例如“单击添加到购物车按钮”）和一个时间戳。还应该为交互提供一个回调函数，你可以在其中执行与交互相关的工作。

在电影APP中，有一个 “将电影添加到队列” 按钮（`+`）。单击此交互将电影添加到你的观看队列：

![format_png 5][]

以下是此交互的跟踪状态更新的示例：

import { unstable_Profiler as Profiler } from "react";
    import { render } from "react-dom";
    import { unstable_trace as trace } from "scheduler/tracing";
    
    class MyComponent extends Component {
      addMovieButtonClick = event => {
        trace("Add To Movies Queue click", performance.now(), () => {
          this.setState({ itemAddedToQueue: true });
        });
      };
    }

我们可以记录这个交互，并在 `React DevTools` 中看到它的持续时间:

![format_png 6][]

也可以使用交互跟踪API跟踪首次渲染，如下所示：

import { unstable_trace as trace } from "scheduler/tracing";
    
    trace("initial render", performance.now(), () => {
       ReactDom.render(<App />, document.getElementById("app"));
    });

![format_png 7][]

## Puppeteer ##

对于 UI 交互的更深入的脚本跟踪，你可能对 `Puppeteer` 感兴趣。`Puppeteer` 是一个 `Node` 库，它提供了一个高级API，用于通过 `DevTools` 协议控制无头浏览器。

它提供了了 `tracing.start()/stop()` 这些工具方法，以捕获 `DevTools` 工作的性能跟踪。下面，我们使用它来跟踪单击主按钮时发生的情况。

const puppeteer = require('puppeteer');
    
    (async () => {
      const browser = await puppeteer.launch();
      const page = await browser.newPage();
      const navigationPromise = page.waitForNavigation();
      await page.goto('https://react-movies-queue.glitch.me/')
      await page.setViewport({ width: 1276, height: 689 });
      await navigationPromise;
    
      const addMovieToQueueBtn = 'li:nth-child(3) > .card > .card__info > div > .button';
      await page.waitForSelector(addMovieToQueueBtn);
    
      // Begin profiling...
      await page.tracing.start({ path: 'profile.json' });
      // Click the button
      await page.click(addMovieToQueueBtn);
      // Stop profliling
      await page.tracing.stop();
    
      await browser.close();
    })();

将 `profile.json` 加载到 `DevTools Performance` 面板中，我们可以通过单击按钮来查看所有由此产生的 `JavaScript` 函数调用：

![format_png 8][]

## User Timing API ##

通过 `User Timing API`，可以使用高精度时间戳来测量应用程序的自定义性能指标。`window.performance.mark()` 存储带有相关名称的时间戳，而 `window.performance.measure()` 存储两个标记之间经过的时间。

// Record the time before running a task
    performance.mark('Movies:updateStart');
    // Do some work
    
    // Record the time after running a task
    performance.mark('Movies:updateEnd');
    
    // Measure the difference between the start and end of the task
    performance.measure('moviesRender', 'Movies:updateStart', 'Movies:updateEnd');

当你使用 `Chrome DevTools` 性能面板配置一个React应用程序时，你会发现一个名为`Timings` 的部分，里面存储了 `React` 组件的处理时间。渲染时， `React` 可以使用 `User Timing API` 发布此信息。

![format_png 9][]

> 注意:React从他们的开发包中删除了 User Timing API ，取而代之的是 React Profiler，它提供了更准确的计时。他们可能会在未来的3级浏览器中重新添加它。

在网上，你会发现一些 `React` 应用利用 `User Timing API` 来定义自己的自定义指标。其中包括 `Reddit` 的“显示第一个帖子标题的时间”和 `Spotif` y的“准备播放的时间”：

![format_png 10][]

自定义用户计时指标也可以方便地反映在 `Chrome DevTools` 的 `Lighthouse` 面板中：

![format_png 11][]

`Next.js` 的最新版本还为许多事件添加了更多的用户计时标记和度量，包括：

*  `Next.js-hydration`
 *  `Next.js-nav-to-render`

所有这些度量都显示在 `Timing` 区域中：

![format_png 12][]

## DevTools & Lighthouse ##

`Lighthouse` 和 `Chrome DevTools Performance` 面板可用于深入分析 `React` 应用程序的负载和运行时性能，突出显示以用户为中心的关键指标：

![format_png 13][]

`React` 用户可能会喜欢像总阻塞时间(TBT)这样的新指标，它量化了一个页面在变得具有可靠交互性之前的非交互性(变为交互性的时间)。下面我们可以看到一个应用程序的并发模式的TBT之前/之后的TBT，在此更好地分散更新：

![format_png 14][]

这些工具通常有助于获得一个浏览器级别的瓶颈视图，如延迟交互的长时间任务(如按钮点击响应)，如下所示:

![format_png 15][]

`Lighthouse` 还提供了许多为 `React` 特殊定制的审计:

![format_png 16][]

译自  https://addyosmani.com/blog/profiling-react-js/

轻点在看，支持作者❤️

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9hRG9ZdmVwRTV4MWFNSWpZZjRDdWczSGpsNVhYOWgzWUNMdFAyZVJpYzdjcjM2SHJLVUpTWkZBanA1dmliTk9Hb2V0UVR6VGJucnRtZnFKNVNkMHlJZXF3LzY0MA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MWFNSWpZZjRDdWczSGpsNVhYOWgzWWNJZUc3Tlp4WTQydnhHbkxpY3FzaWF0amVBMGlienFkOXpHRUc2NmdlR2xkTk54bXFlQ1hxeTVVUS82NDA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MWFNSWpZZjRDdWczSGpsNVhYOWgzWXRSSFVRblJmcWdoaWIxY21HTER0eWVVd1g4emU3WGZpY0oxNnBQbUhlT2NpYWliZUIwUGlhanpSbllnLzY0MA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MWFNSWpZZjRDdWczSGpsNVhYOWgzWUFxYTRBejNKY1ROS2ZuZkpDZjRpYkJyNmlhT3lqaDliYTZqY28wUzlYQXQ2dUxOWnVZZGt3ZjBnLzY0MA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MWFNSWpZZjRDdWczSGpsNVhYOWgzWVBzRDl0bEpVVWZIMWliYks3c2J2SjRMYVk0WUdZQUczWjBqaWJZVVA0c0RGRWNIM2FsclZTbjBRLzY0MA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9hRG9ZdmVwRTV4MWFNSWpZZjRDdWczSGpsNVhYOWgzWU41YUpPb1Bsc01WTzB0WmljQlF0NG92Mkl0WUQ0VVlqdHJxUWYxRTRLc2RGRERsY1lBUDB5TEEvNjQw?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MWFNSWpZZjRDdWczSGpsNVhYOWgzWVcyUm9JemljNEpnMWdpYTRUM3RXTzU1b1NBZlo1Q3hKVFJYWlVGbW9kUk5HaWFBUUxtMUxYeTVWZy82NDA?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MWFNSWpZZjRDdWczSGpsNVhYOWgzWTNYV2dkd0RPcjl2NWlhaWNMWGpwdmN2OGFWUWdVOHdibkUyTFY0UXdmQ25qdktuYUdtdllNT25RLzY0MA?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MWFNSWpZZjRDdWczSGpsNVhYOWgzWXVFSmljcnc4dWU5eVBhcmlhbkNSUkVPeUZFemNER2NpYmpUV09qZVlQVE5lSGNjTW1ZQW9UU1BpYlEvNjQw?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MWFNSWpZZjRDdWczSGpsNVhYOWgzWWV0Zno2aWFXMHpIYW9saWFQS1BjdU45U2RFeTJkekNHUzhSdElPcUZxOTVSb0lBY201WkpoMUtBLzY0MA?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MWFNSWpZZjRDdWczSGpsNVhYOWgzWVJ5bjJxam9LeW9XUUg0V1hGT3c0RG92ZWRpYVVjRnc5N0Z3bWpQY0YwNzVoeW9vUVF1RmlhS3BnLzY0MA?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MWFNSWpZZjRDdWczSGpsNVhYOWgzWTc3dzBGUUlHZ0I5eTl4ZEF2YVFicDF5SDBpY3ZyVkRwejZYbDdSTWtCUzVIMUlVZDFsckRCbFEvNjQw?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MWFNSWpZZjRDdWczSGpsNVhYOWgzWWdVb0duTVBKc2xMSXpROGlhUFZ1c1RkQmdCcFh1elh4enhkU2hpYkVydHN3UVFjOTdFbk1BQU9nLzY0MA?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MWFNSWpZZjRDdWczSGpsNVhYOWgzWW5xRHp6VG5ZRmFVenRpYnlESE5sNkFtTjNsamJuNVgwQ2NPNVgyc2JJWEE5MDFSZkdpYWdkTnFRLzY0MA?x-oss-process=image/format,png
[format_png 14]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MWFNSWpZZjRDdWczSGpsNVhYOWgzWTY0cHIydmhGSUhYZ25pYTlHeENESm5NZmdLVVpBdXpOSFVFMkpDS2M2SlpoN1JuSFZVU1lnUUEvNjQw?x-oss-process=image/format,png
[format_png 15]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MWFNSWpZZjRDdWczSGpsNVhYOWgzWWlid2UyWHRiMHFDODNWdWlhc2liWnNOOEE2TEZoSER4bGRDcXFEcEo2b1VibGZNT0l2RjhTbGxRUS82NDA?x-oss-process=image/format,png
[format_png 16]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hRG9ZdmVwRTV4MWFNSWpZZjRDdWczSGpsNVhYOWgzWW0wVTBUZFhtZ1BpYjZWMzlwSDNhMWljQmQyOElHMHU3R0tycHFWRjhtWDV2VEtaeFVObERFZ2h3LzY0MA?x-oss-process=image/format,png