React.js性能分析

今天我将向大家演示如何使用React Profiler APITracing API以及User Timing API来分别追踪React的组件渲染、用户交互以及自定义性能指标。

本文最初发布于Addy Osmani博客,经原作者授权由InfoQ中文站翻译并分享。

下面我会用一个影片排期的应用做具体的演示(译者注:应用效果图如下)。

React Profiler API

首先来了解下React Profiler,它主要用来追踪应用组件的渲染过程以及渲染开销,同时标记出应用的性能瓶颈。Profiler接受一个onRender回调函数,当被追踪的组件以及子代组件发生更新时,该函数就会被调用。下图是在影片排期应用中使用Profiler追踪各个组件渲染:

Profiler中onRender回调函数的具体参数如下:

  • id:这是Profiler的唯一标示,区分是哪个Profiler追踪的组件树发生了更新
  • phase:如果更新是挂载阶段这个值就是“mount”,如果是二次渲染阶段就是“update”
  • actualDuration:更新花费的渲染时间
  • baseDuration:更新预计花费的渲染时间
  • startTime:更新开始时间点
  • commitTime:更新提交的时间点
  • 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调试器中可以看到如下输出:

也可以打开React DevTools,在Profiler面板中可以看到组件渲染的时间火焰图:

切换到排序视图

当然也可以使用多个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>
)

知道了如何追踪组件渲染,那么如果想跟踪交互,该怎么做

交互追踪Tracing API

想一下,如果能追踪到交互(例如:按钮的点击),那么在回答“这个按钮点击花费了多少时间更新DOM?”这样的问题时是不是就有了依据。要感谢Brian Vaughn的努力,React在其调度包中引入了对这个功能的试验支持,更详细的说明可以点击这里查看。

一个交互追踪,需要包含一个描述(例如:添加购物车按钮被点击)、一个时间戳和一个回调函数,在回调函数中你可以定义一些和该交互相关的逻辑。在“影片排期应用”中就有一个添加电影到播放列表的“+”号按钮,这个就是一个交互按钮。

下面的代码演示了如何追踪这个按钮的点击行为:

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开发调试工具的interaction面板中可以看到具体的交互行为和持续时间:

这个API同样也可以追踪初始化渲染

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

Brian提供了更多的例子,比如如何追踪异步行为等。这些示例都在其“React中进行交互追踪”项目的gist中。

Puppeteer的使用

如果想对UI交互追踪脚本做进一步了解的话,你可能会对Puppeteer这个库感兴趣。Puppeteer是一个Node库,基于Chrome开发协议封装API来操作headless Chrome(译者注:Chrome浏览器对无界面形态)。

为了捕获DevTools对当前运行程序性能的追踪,Puppeteer提供了trace .start()和trace.stop()两个API,下面我们就用它来追踪按钮点击的过程,代码如下:

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);
  // 开始追踪...
  await page.tracing.start({ path: 'profile.json' });
  // 按钮点击
  await page.click(addMovieToQueueBtn);
  // 停止追踪
  await page.tracing.stop();
  await browser.close();

然后在开发工具的性能面板中导入profile.json,我们就可以看到当按钮点击的时候,所有函数的调用情况:

如果你对交互追踪感兴趣并且想了解更多的话,不妨看看Stoyan Stefanov的“JavaScript组件级别的CPU开销”这篇文章。

客户端性能追踪API

使用客户端性能追踪API可以追踪一些定制的性能指标,并且时间精确度会更高。它有2个主要的API:

  • window.performance.mark():存储当前mark执行时的时间戳
  • window.performance.measure():存储2个相同mark之间的执行时间

示例代码如下:

// 记录任务开始之前的时间戳
performance.mark('Movies:updateStart');
// 这里执行了一些任务...
// 记录任务结束的时间戳
performance.mark('Movies:updateEnd');
// 计算任务开始前后的差值
performance.measure('moviesRender', 'Movies:updateStart', 'Movies:updateEnd');

当你通过Chrome调试工具中的性能面板查看一个React应用时,有一个“Timings”的区域,这里归集了你的React组件的执行时间。在渲染时,React会把通过客户端API得到的性能数据发布到这里。

在互联网上,你会发现有一些其他的React应用已经在使用User Timing追踪他们的自定义指标,包括Reddit网站中的“到第一标题可见花费的时间”和Spotify网站中的“到回放准备完毕花费的时间”。

还可以在Chrome调试器的Lighthouse面板中查看到定制化的User Timing标记和追踪方法,如下图:

Next.js的最近版本中也针对一些事件添加了很多User timing标记和追踪,例如:

  • Next.js-hydration:混合持续时间
  • Next.js-nav-to-render:导航开始到开始渲染之间的时间

所有的这些追踪都可以在调试器的Timings区域看到:

对比DevTools和Lighthouse

值得注意的是,LighthouseChrome调试工具中的性能面板都可以深入分析React 应用程序的加载和运行时性能,用户可以看到下面这些性能指标:

React用户可能会喜欢像总阻塞时间(TBT)这样的新指标,它量化一个页面具体什么时候才可以交互(可交互时间), 下面我们可以看下在并发模式前后应用发生更新时,TBT的情况:

这些工具一般能帮助我们了解在浏览器级别的视图性能瓶颈,例如,哪些繁重冗长的任务会引起交互延迟(例如按钮点击响应) :

Lighthouse还为一些特定的性能场景提供了修改建议。如在Lighthouse 6.0中可以看到一个提示,建议我们移除未使用的JavaScript代码。Lighthouse追踪到了这个问题并且提醒我们可以使用 React.lazy ()来引入这个JavaScript。

借助用户端的硬件进行性能智能检查,往往对性能分析非常有帮助。

最后,除了上面提到的我通常还会从RUM 和 CrUX获取一些数据字段,然后用webpagetest.org/easy工具帮我生成更多的场景图片,以便更好的进行性能分析。

如果你对文章中的demo有兴趣,可以点击查看在线demo,或者从Glitch上下载源码。

原文链接:Profiling React.js Performance

  • 发表于:
  • 本文为 InfoQ 中文站特供稿件
  • 首发地址https://www.infoq.cn/article/8T9M7dtzqWNsSFfXMgSb
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券