React 官方发布性能分析插件Profiler

1,919 阅读6分钟
原文链接: mp.weixin.qq.com

原文作者:Brian Vaughn

     译者:UC 国际研发 PPP

写在最前:欢迎你来到“UC国际技术”公众号,我们将为大家提供与客户端、服务端、算法、测试、数据、前端等相关的高质量技术文章,不限于原创与翻译。

React 16.5 新增了对开发工具(DevTools)性能分析插件(profiler plugin)的支持。该插件通过 React Profiler API(实验中)收集每个组件渲染的耗时,用于分析识别出 React 应用中的性能瓶颈。它与我们即将推出的 time slicing 和 suspense 这两个功能将完全兼容。

使用性能分析插件

DevTools 将为支持 Profiler API 的应用展示“Profiler”选项卡:

注意:react-dom  16.5+ 在 DEV 模式下默认支持性能分析。如果生产包需要支持可以用 react-dom/profiling 。 可以在 fb.me/react-profiling 中了解有关如何使用该包的更多信息。

“Profiler”面板默认打开是空的。单击“录制”按钮开始录制:

一旦开始录制,DevTools 将在每次应用渲染时自动收集性能信息。然后正常使用你的应用。单击“停止”按钮停止录制并分析。

假设你的应用在分析过程中至少渲染过一次,那么 DevTools 将通过多种方式为你展现性能数据。我们将在下面一一说明。

查看性能报告

Commits(提交)报告

理论上,React 的工作分为两个阶段:

  • render(渲染)阶段,将决定是否需要更新 DOM。此时 React 调用render 函数,然后将本次 render 函数的结果与上一次的结果进行比较。

  • commit(提交)阶段,当 React 做出更新 DOM 的操作(DOM 节点的增加,删除,修改等)时,此阶段还会调用componentDidMountcomponentDidUpdate 等与生命周期相关的函数。

译者注:可阅读 React virtual DOM 相关资料

DevTools Profiler 通过“commits(提交)”对性能信息进行分组。commits (提交) 显示在 Profiler 顶部附近的条形图中:

图表中的每个竖条表示一次 commit(提交),当前选中的 commit(提交)颜色为黑色。可以通过单击竖条(或左/右箭头按钮)来选择其它的commit (提交)。

每个竖条的颜色和高度对应了本次 commit(提交)的渲染所需的时间(较高的黄色竖条比较短的蓝色竖条耗时更长)。

过滤 Commits

录制的时间越长,应用 render 的次数就越多。有时候你可能会记录很多次的 commits。为了能让分析起来更方便,Profiler 提供了过滤功能。可以通过设定一个阈值,让 Profiler 隐藏所有比该值小的 commits。

火焰图

火焰图表示某次特定 commits 对应的应用的状态。图中的每个横条代表一个 React 的组件(例如 App,Nav)。横条的大小和颜色表示渲染组件及其子组件所需的时间。(横条的宽度表示组件最后一次渲染时花费的时间,颜色表示作为本次 commit 的一部分所花费的时间。)

注意:

横条的宽度表示在最后一次渲染时渲染组件(及其子组件)所需的时间。如果组件未作为此次 commit 的一部分重新更新,则表示先前的时间。组件越宽,渲染耗时越长。

横条的颜色表示组件(及其子组件)在所选 commit 中渲染的耗时。黄色的组件耗时更多,蓝色的组件耗时较少,灰色组件表示在本次 commit 期间不需要渲染。

例如,上面显示的 commit 总共需要 18.4 毫秒进行渲染。该 Router 组件的渲染耗时是最多的(耗时 18.4 毫秒)。其中大部分时间消耗在它的两个子组件,Nav(8.4ms)和 Route(7.9ms)上。剩下的时间消耗在剩余的子节点,或者在它自己的渲染方法中。

你可以通过单击组件放大或缩小火焰图:

点选组件时,在右侧面板中还会显示其 props 和 state 在 commit 时的信息。你可以了解更详细的信息,帮你更好的分析组件在 commit 期间实际呈现的内容:

通常,在切换不同的 commit 时,右侧面板还会对触发本次 commit 的属性高亮显示:

上图显示了 state.scrollOffset 在两次 commits 之间的变化。这可能是导致 List 组件重新渲染的原因。

排序图

排序图用于分析单次的 commit。图表中的每个横条代表一个 React 组件(例如App,Nav)。对渲染耗时进行了降序排序。

注意:

组件的渲染的耗时包括渲染其子组件所花费的时间,因此这类组件通常排在图标的顶部。

与火焰图一样,你可以通过单击组件来放大或缩小。

组件图

有时,可能需要查看某个特定组件在本次分析中一共渲染了多少次。组件图以柱状图的的形式呈现这个信息。图表中的每个竖条展示了组件每次渲染的耗时。颜色和高度表示组件相对于本次 commit 中的其他组件渲染的时间。

上图显示该 List 组件渲染了 11 次。它还表明,每次渲染时,它都是 commits 中最“昂贵”的组件(意味着它的耗时最长)。

要查看某次渲染的详细情况,可以双击组件或选择组件,然后单击右侧详细信息窗格中的蓝色条形图图标。并可以通过单击右侧详细信息窗格中的“x”按钮返回。双击详细中的内容可以查看有关本次 commit 的更多信息。

如果在本次分析会话期间所选组件根本未呈现,则将显示以下消息:

Interactions(理解为触发更新的动作)

React 最近添加了另一个用于记录触发更新动作的API(实验中)。使用此 API 记录的 interactions 也将显示在 Profiler 中:

上图显示了在一个分析会话中记录的四个 interactions。每行代表一次 interaction。每行中的彩色圆点代表着与该 interaction 相关的 commit。

你还可以从火焰图和排名图中查看为某次 commit 记录的 interaction:

你可以通过单击它们,在 interaction 和 commits 之间互相切换:

这是一个新的 API,我们将在以后的博客文章中更详细地介绍它。

故障排除

选中的 root 节点没有分析数据

如果你的应用有多个 root 节点,那么在分析时可能会看到以下界面:

此消息表示选中的 root 节点没有分析数据。在这种情况下,尝试在该面板中选择不同的 root 节点以查看该 root 节点的分析信息:

选中的 commit 没有显示计时数据

有时可能会因为 commits 太快,以至于 performance.now() 还没有把相关有意义的时序信息传递给 DevTools。在这种情况下,将显示以下界面:

英文原文:

https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html