[译] React Profiler 介绍

• 原文地址：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
• 查看性能数据
  • 浏览 commits
  • 筛选 commits
  • 火焰图
  • 排序图
  • Component 图
  • 交互动做（Interactions）
• 常见问题 & 解决方法
  • 选择的根元素下没有 profile 数据被记录
  • 选中的 commit 记录没有展现时间数据

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 中同其它组件的耗时对比。

上图代表 List component 渲染了 11 次。同时还代表 List 在每次渲染中是最“昂贵”的组件。（译者注：此处是经过列的颜色判断）

查看这种图的方法有两种：双击一个 component 或者是选中一个 component 后点击在右边列中的蓝色表格按钮。你能够经过点击右边列的 “x” 按钮来返回原图，固然你也能够双击 Component 图中的某一列来查看那次 commit 的更多信息。

若是你所选中的 component 在 profile 期间历来没被渲染过，则会显示下面的信息：

交互动做（Interactions）

React 最近添加了一个 实验性 API，目的是为了追踪引发更新的缘由。被这些API所追踪的“交互动做”也会展现在 profiler 里：

上图展示了一个 profile 期间被追踪的 4 个交互动做。每行都展现了一个追踪的交互动做。每行里带有颜色的点表示与其交互动做所对应的 commit 记录。

你也能够在特定的 commit 记录的右边列看到在该记录期间所被追踪的交互动做。

你能够经过点击它们来实如今交互动做和 commits 之间的跳转：

tracking API 仍然是很新的特性，咱们会在接下来的博客文章中详细介绍它。

常见问题 & 解决方法

选择的根元素下没有 profile 数据被记录

若是你的 APP 有好几个 “root”（译者注：指 React 有好几个 root 组件），你可能会在 profile 以后看到下面的信息：

这个信息表示你在 “Elements” 界面下所选择的 root 之下没有性能数据被记录。这种状况下，请尝试选择一个不一样的根元素来查看在这个 root 下的 profile 数据：

选中的 commit 记录没有时间数据能够展现

有时候 commit 速度可能很是地快，以致于 performance.now() 无法提供给 DevTools 任何有意义的数据。这种状况下，会展现下面的界面：

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专列。