【译】使用Chrome Devtools进行 React V16 性能分析

有网友碰到这样的问题“【译】使用Chrome Devtools进行 React V16 性能分析”。小编为您整理了以下解决方案，希望对您有帮助：

解决方案1：

使用Chrome DevTools进行React V16性能分析

在使用React构建用户界面时，高效的渲染性能是至关重要的。然而，在开发过程中，我们可能会遇到组件渲染变慢甚至卡顿的问题。为了排查和修复这些问题，我们可以使用Chrome DevTools进行性能分析。本文将详细介绍如何使用Chrome DevTools来诊断React组件的渲染性能问题。

前提条件在开发模式下使用React。使用source-map模式（虽然不是必选，但强烈建议）。使用Google或Chromium的开发者工具。浏览器开发者工具设置

首先，打开Chrome浏览器，并通过按F12（Windows）或Option + Command + I（Mac）打开开发者工具。将调试工具设置为的窗口，以便拥有更大的空间进行调试。你也可以选择其他布局模式，如上下或左右布局。

在查看应用程序性能时，需要模拟真实使用场景。由于并非所有用户的设备都是高端设备，因此可以在开发者工具中通过设置降低设备性能，从而降低JavaScript的执行速度，使性能问题更加突出。

模拟低端设备

通过降低设备性能，可以模拟低端设备的运行情况，从而更容易发现性能问题。

查看性能跟踪

在开发模式下，React会在渲染页面时为每个组件创建标记（mark）和度量（measure）。打开需要测试的页面，然后点击性能分析按钮“开始分析和重新加载页面”。Chrome将记录当前页面的性能，并在页面加载完成后自动停止追踪，最终生成一张性能追踪图。

性能追踪图从左到右展示了页面加载和初始化的时间轴，包括Frame Started loading（绿色）、DOMContentLoaded Event（蓝色）和Load Event（红色）三条竖线。

在性能追踪图中，红色条形指示器显示跟踪时间线的这一部分周围存在一些重要的“CPU刻录”（长任务），即可能出现性能问题的地方。我们需要关注这些区域以进行问题分析。

分析性能问题展开User Timing：单击打开User Timing，然后使用屏幕截图时间轴来查看页面的绘制方式。查看红色CPU刻录区域：在页面跟踪期间，我们可以看到页面呈现了元素。通过拖动图表区域缩放时间轴，我们可以更清晰地看到红色的CPU刻录区域。

分析组件：在高级汇总区域，缩放刻度可以看到下面的火焰图发生联动。我们可以清楚地看到标记为“Pulse”的组件（渲染需要500毫秒）。在Pulse组件下面，似乎有子组件呈现，尽管这些项的大小表明它们不会花费大量的执行时间。

寻找导致性能问题的方法：

单击要分析的组件（如Pulse），在窗口的下半部分仅关注来自该组件的活动。

选择“自下而上”并按总时间下降排序。

单击打开箭头，查看可疑的调用（如map调用），它可能被多次调用并耗费了较长的执行时间。

使用source-map定位到源码位置，以便进一步分析。

优化性能

一旦找到导致性能问题的原因，就可以进行针对性的优化。例如，优化map调用的逻辑、减少不必要的渲染、使用React的memoization功能等。

注意事项所有主流浏览器都支持User Timing API，但Chrome的性能选项卡提供了更多功能，可以更轻松地调试React应用程序。在优化性能时，要确保应用程序在低端设备上的性能表现良好，从而在更好的设备上提供更好的用户体验。额外资源

如需了解更多关于浏览器开发者工具的使用，可以参考以下链接：

Chrome DevTools性能评估Chrome DevTools性能分析

通过本文的介绍，你可以使用Chrome DevTools对React V16进行性能分析，并找到导致性能问题的原因，从而进行针对性的优化。这将有助于提升你的React应用程序的渲染性能，提供更好的用户体验。