深入浅出React.js 性能分析( 二 ) _React.js

文章插图

这个 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 在它的开发包中用 Profiler 替代了 User Timings，不过由于 User Timings 的时间精度更高，所以可能会在未来的 3 级规格的浏览器中重新添加它。
在互联网上，你会发现有一些其他的 React 应用已经在使用 User Timing 追踪他们的自定义指标，包括 Reddit 网站中的“到第一标题可见花费的时间”和 Spotify 网站中的“到回放准备完毕花费的时间” 。