React 16.5 新增了开发者工具的分析器插件。
该插件使用 React 的实验性 Profiler API 来收集每个组件渲染的耗时,以识别 React 应用程序中的性能瓶颈。
它将完全兼容我们即将推出的时间切片和 suspense 功能。
这篇博文涵盖了以下主题:
开发者工具将为支持分析 API 的应用程序显示 "Profiler" 选项卡:
注意:
react-dom
16.5+ 在 DEV 模式下支持性能分析。 也可以使用react-dom/profiling
生产分析代码包, 通过查阅 fb.me/react-profiling 来了解更多关于使用这个包的内容。
"Profiler" 面板初始为空,点击记录按钮开始分析:
一旦你开始录制,开发者工具将在每次应用程序渲染时自动收集性能信息。
正常使用你的应用,
当你完成性能分析时,点击 "Stop" 按钮。
假设你的应用程序在分析时至少渲染一次,开发者工具将提供几种方法查看性能数据。
我们将在下面逐一介绍.
从概念上讲,React分两个阶段工作:
render
,然后将结果与上次渲染的结果进行比较。componentDidMount
和 componentDidUpdate
之类的生命周期方法。开发者工具的分析器按提交对性能信息进行分组。
提交展示在分析器顶部附近的条形图中:
图表中的每个条形表示单个提交,当前选定的提交为黑色。
你可以单击条形图(或左/右箭头按钮)来选择其他提交。
每个条形的颜色和高度对应该次提交渲染所需的时间。
(较高的黄色条形比较短的蓝色条形耗费的时间长。)
分析的时间越长,应用程序渲染的次数越多。
在某些情况下,你可能会因为 太多的提交 而难以处理。
分析器提供了一种过滤机制来帮助实现这一点。
使用它来指定阈值,分析器将隐藏所有比该值 更快 的提交。
火焰图代表指定提交的应用程序状态。
图表中的每个条形代表一个React组件, (如: App
, Nav
)。
条形的大小和颜色代表渲染该组件及其子组件所需的耗时。
(条形的宽度代表组件 上次渲染 的耗时,颜色代表 当前提交 的耗时。)
注意: 条形的宽度代表上次渲染组件(及其子组件)时所需的耗时。 如果组件在本次提交中未重新渲染,则代表之前的渲染耗时。 条形图越宽,渲染耗时越长。条形的颜色代表组件(及其子组件)在所选提交中渲染的耗时。 黄色组件耗时更多,蓝色组件耗时更少,灰色组件则代表这个提交期间不渲染。
例如,上面显示的提交总共需要 18.4ms 进行渲染。
Router
组件是"最昂贵的"渲染(耗时 18.4ms)。
大部分时间消耗在它的两个子组件上,Nav
(8.4ms) 和 Route
(7.9ms)。
剩下的时间被剩余的子节点瓜分,或者在组件自己的渲染方法中使用。
你可以通过单击组件放大或缩小火焰图:
单击组件将选中它并同时在右侧面板中其详细信息,其中包括其提交时的 props
和 state
。
您可以深入这些内容,进一步了解提交期间组件实际渲染的内容:
在某些情况下,选择组件并在提交之间步进也能得到关于组件渲染 原因 的提示:
上图显示 state.scrollOffset
在提交之间发生了变化。
这可能是导致 List
组件重新渲染的原因。
排行榜视图表示单个提交。
图表中的每个条形代表一个 React 组件 (如: App
,Nav
)。
对图表进行排序,以便渲染耗时最长的组件位于顶部。
注意: 组件的渲染耗时包括渲染其子组件所花费的时间, 因此,渲染耗时最长的组件通常位于树的顶部附近。
与火焰图一样,你可以通过单击组件放大或缩小排行榜。
某些时候,在分析时查看指定组件渲染了多少次是很有用的。
组件图以条形图的方式提供这些信息。
图表中的每个条形代表组件渲染的时间。
每个条形的颜色和高度对应于组件 相对于其他组件 的指定提交的渲染耗时。
上图显示 List
组件渲染了11次。
它还显示了每次渲染时,它都是提交中最"昂贵”的组件(意味着它的耗时最长)。
要查看此图表,请双击组件 或 选择组件,然后单击右侧详细信息窗格中的蓝色条形图图标。
你可以通过单击右侧详细信息窗格中的 "x" 按钮返回上一个图表。
你还可以双击指定的条形来查看该提交的更多信息
如果所选的组件在分析会话期间没有渲染,将显示以下消息:
React 最近添加了另一个用于跟踪更新 原因 的 实验性 API。
跟踪此 API 的“交互”也将显示在分析器中:
上图显示了一个跟踪四个交互的分析会话。
每行代表一个被跟踪的交互。
每行的彩色圆点表示与该交互相关的提交。
你还可以从火焰图和排行榜的视图中查看指定提交跟踪了哪些交互:
通过单击交互和提交,可以在交互和提交之间切换导航:
新的跟踪 API,我们将在未来的博文中更详细地介绍它。
如果你的应用程序有多个"根”节点,你可能会在分析后看到以下消息:
此消息表示没有为“元素”面板中选中的根节点记录性能数据。
在这种情况下,请尝试在该面板中选择不同的根节点来查看性能分析信息:
有时提交可能很快,以至于 performance.now()
不会给开发者工具任何有意义的计时信息。 在这种情况下,将显示以下消息。
在这种情况下,将显示以下消息:
以下视频演示了如何使用 React 分析器来检测和改善实际 React 应用程序中的性能瓶颈。
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/nySib7ipZdk?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
本文系外文翻译,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系外文翻译,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。