本文由 简悦 SimpRead转码， 原文地址 www.callstack.com
利用实时数据改善移动用户体验，使用 ...... 等工具剖析您的 React Native 应用程序
以下文章是React Native 优化终极指南的一部分，介绍了 iOS 和 Android 上的 React Native 剖析。
为什么这很重要？
随着用户对延迟越来越敏感，即使是 0.1 秒的改进也能将转换率提高 10.1%。这就是为什么剖析已成为我们开发生命周期的主要步骤之一。使用正确的剖析工具可以发现性能问题的源头，并更容易找到能真正发挥作用的解决方案，而用户的满意意味着更好的业务成果。
在基于《React Native 优化终极指南》的其他博文中，我们涉及了以下与稳定性相关的主题：
稍后请查看这些内容，现在让我们使用 iOS 和 Android 的原生工具来了解 React Native 剖析的来龙去脉。
剖析 iOS
通过分析测量内存或时间复杂性、函数调用的频率和持续时间等，剖析对于了解应用程序的运行时性能至关重要。获取所有这些信息可帮助您追踪并提供适当的解决方案，以保持应用程序的健康和用户的参与。
Xcode 提供了一些基本工具来完成第一份报告。您可以监控 CPU、内存和网络。
CPU 监视器可测量已完成的工作量。内存监控器用于观察应用程序的使用情况。所有 iOS 设备都使用固态硬盘作为永久存储，与 RAM 相比，访问这些数据的速度较慢。磁盘监控器用于了解应用程序的磁盘写入性能。网络监控器可分析 iOS 应用程序的 TCP/IP 和 UDP/IP 连接。你可以点击每个连接来查找更多信息。
它还提供了一个默认不显示的额外监视器，但可以帮助你检查用户界面，这就是视图层次结构。当程序运行时，你处于要检查的屏幕上，点击调试视图层次。
这将以 2D/3D 模型和视图树的形式显示当前用户界面。
这将帮助你检测重叠（看不到组件）或是否要扁平化组件树。尽管 RN 会对视图进行扁平化处理，但有时并不能对所有视图进行扁平化处理，因此我们可以在此针对特定项目进行优化。
假设我们有一个 TODO 列表应用程序，按下添加按钮后，新项目就会添加到列表中。但是，由于在添加项目之前有一些逻辑，因此需要几秒钟才能显示在列表上。让我们到开发工具箱中拿起第一个工具，确认并测量延迟。
使用 iOS Instruments 对 React Native 应用程序进行剖析和调试
Instruments 是一款调试和剖析工具，预装在 Xcode 中，是一个工具箱，每个工具都有不同的用途。您可以从一个模板列表中进行选择，并根据您的目标（如提高性能、电池续航时间或修复内存问题）选择其中任何一个模板。
我们将使用 Time Profiler。让我们深入了解它。打开 Xcode，进入 "打开开发工具" -> "仪器"。然后向下滚动，找到 Time Profiler 工具。
它会打开一个新窗口。要开始剖析应用程序，请单击下拉菜单并选择设备和应用程序。
应用程序打开后，请开始正常使用，或者在本例中添加一个新的 TODO 项目。
在玩了一圈并添加了新的 TODO 项目后，我们可以看到有一个大大的蓝色矩形，这意味着有些事情需要花费大量时间才能完成。让我们来看看线程。
您可以通过按选项+单击 "hevron "来展开，展开后会显示有用的信息。至少现在，它显示的是内存地址，但我们需要找到另一种方法来找到问题所在。
与 JS 上下文跟踪专用工具相结合
让我们使用 Flipper 并将其与名为 Hermes Debugger (RN) 的监视器配对。打开并运行应用程序后，我们进入 Flipper，选择正在运行的应用程序（如果尚未选择），然后进入 Hermes Debugger (RN) -> Profiler
点击开始，剖析器就开始运行了。在使用 Time Profiler 进行剖析时，我们执行的流程和操作与之前相同。停止时，我们将看到收集到的所有数据。
默认情况下，数据将自下而上排序，任务重的排在最前面。我们可以看到一个名为 doFib 的函数耗时约 14 秒，这是一个良好的开端，让我们进入该函数，看看可以做些什么。根据代码的不同，修复方法也会不同。
应用可能的修复后，我们首先再次检查 Time Profiler。点击 "记录 "按钮，开始使用应用程序；在我们的例子中，让我们添加一个新的 TODO 项目。
正如我们所看到的，我们应用的修复程序确实起了作用，我们不再像以前那样看到蓝色的大矩形。这是一个好兆头。让我们继续我们的剖析路径，检查它在 Flipper 中的效果。
使用 Hermes Debugger (RN) -> Profiler 再对应用程序进行一次剖析。
我们看不到 doFib 函数了，只有其他预期的 RN 任务。
剖析 Android
如果出现任何性能问题，我们大多会使用 React Profiler 来排除故障并解决问题。由于大多数性能问题都源自 JS 领域，我们通常不需要做任何其他事情。但有时，我们会遇到直接来自 Android 运行时的错误或性能问题。在这种情况下，我们需要一个精细的剖析工具来帮助我们收集设备的以下指标：
- CPU
- 内存
- 网络
- 电池使用情况
根据这些数据，我们可以检查我们的应用程序是否比平时消耗了更多的能量，或者在某些情况下，CPU 的耗电量是否超过了应有的水平。在低端（LE）安卓设备上检查执行的代码尤其有用。有些算法在某些设备上运行得更快，最终用户不会发现任何故障，但我们必须记住，有些客户使用的是 LE 设备，算法或功能对他们的手机来说可能过于繁重。而高端设备则可以胜任，因为它们的硬件功能强大。
使用 Android Studio 中的 Android Profiler 对 React Native 应用程序进行剖析
Android Studio 是 JetBrains 开发的集成开发环境。它由 Google 官方支持，是官方 IDE，可用于开发任何 Android 应用程序。它功能强大，集多种功能于一身。其中一个工具就是 Android Profiler，顾名思义，如果你需要在 Android 上进行 React Native 剖析，它就会派上用场。
如果你还没有安装 Android Studio，可以使用 此链接 进行安装。
要打开剖析器，请从 Android Studio 菜单栏选择 "视图">"工具窗口">"剖析器"：
或点击工具栏中的 "配置文件"。
在开始剖析应用程序之前，请记住
- 在受影响的实际 Android 设备上运行应用程序，如果没有设备，最好使用低端手机或模拟器。如果您的应用程序已设置运行时监控，请使用用户使用最多的机型或受特定问题影响的机型。
- 关闭开发模式。您必须确保应用程序使用的是 JS 捆绑程序，而不是提供该捆绑程序的 metro 服务器。要关闭开发模式，请共享您的设备，点击 "设置 "并找到 "JS 开发模式"：
然后，转到 "剖析器 "选项卡并添加一个新的剖析器会话：
等待会话附加到您的应用程序，然后开始执行可能导致性能问题的操作，如轻扫、滚动、导航等。完成后，您应该会看到一些类似的指标：
每个绿地 React Native 应用程序只有一个 Android 活动。如果您的应用有多个活动，那么它很可能是一个 "棕地 "活动。点击此处了解有关棕地方法的更多信息。在上面的示例中，我们看不到任何有趣的东西。一切运行正常，没有任何故障。让我们检查一下各项指标：
- CPU 指标与能耗密切相关，因为 CPU 需要更多能量来完成某些计算。
- 内存指标在使用应用程序时没有变化，这在意料之中。内存使用量可能会增加，例如在打开新界面时，也可能会在垃圾回收器 (GC) 释放可用内存时下降，例如在退出界面时。当内存意外增加并持续增长时，可能表明存在内存泄漏，我们希望避免这种情况，因为它会导致应用程序因内存不足（OOM）错误而崩溃。
- 网络部分已移至名为 "网络选项卡 "的独立工具中。在大多数情况下，并不需要这一指标，因为它主要与后端基础设施有关。如果你想对网络连接进行剖析，可以在这里找到更多信息。
- 能源部分会提示应用程序的能源使用量是低、中还是高，从而影响应用程序的日常使用体验。
实际使用 Android Profiler
在前面的示例中，我们可以看到每个指标之间的一些关系：
要查看更详细的视图，我们必须双击选项卡。现在我们可以看到更多细节。当用户开始执行一些触摸操作（上例中的轻扫）时，我们可以看到更多的 CPU 工作。每个应用程序都有自己的 CPU 峰值和低值特征。重要的是要通过与之交互，并将某些活动（如触摸事件）与增加的使用量配对起来，从而建立起对它的直觉。换句话说，有些峰值是预料之中的，因为需要完成工作。当 CPU 使用率长时间或在意想不到的地方非常高时，问题就来了。
假设您想为 React Native 应用程序挑选最佳的列表或滚动视图组件，以便在低端设备上获得最佳性能。您注意到当前的解决方案可以进行改造或改进，于是您开始了这方面的工作。在实验中，您想使用上述解决方案检查您的解决方案在 LE 设备上的运行情况。当您双击 CPU 时，可以发现以下数据：
在这里，您可以看到 mqt_js线程 几乎一直在使用，并进行了一些繁重的计算，因为您的计算是在 JS 端完成的。您可以开始考虑如何改进它。有多个选项可供参考：
- 在通信方面用 JSI 替代桥接器--测试 JSI 是否比桥接器更快。
- 将部分代码移到本地端--在本地端，你可以更好地控制线程的执行，还可以安排一些工作，避免阻塞 JS 或 UI 线程。
- 使用不同的本地组件--用你的自定义解决方案替换本地滚动视图。
- 使用阴影节点（shadow nodes）--使用 C++ 进行一些昂贵的计算，然后将其传递给本地端。
你可以尝试所有这些解决方案，并比较它们之间的效果。剖析器将为你提供一个衡量标准，你可以据此决定哪种方法最适合你的特定问题。
有关 Android Profiler 的更多信息 此处。
使用 Android Studio CPU Profiler 进行系统跟踪
使用 Android Studio CPU Profiler，我们还可以进行系统跟踪。我们可以检查适当的函数何时被调用。我们可以对所有线程进行分流，查看哪个函数的成本最高，从而影响用户体验。要启用系统跟踪，请单击 CPU 部分并选择系统跟踪记录。
进行一些交互后，你就能看到所有线程的详细信息：
您还可以单击 "保存 "按钮保存数据：
并在不同的工具中使用这些数据，例如 Perfetto：
您还可以查看 React Native 核心团队的官方Android Profiling guide。它们使用的工具不同，但结果是一样的。该指南提供了案例研究以及如何在不同线程上发现问题：
- 用户界面线程
- JS 线程
- 本地模块线程
- 渲染线程（仅适用于安卓系统）
有关线程模型的更多信息，请参阅新架构博文。
安卓版 Flipper 性能插件
我们已经知道Flipper 在解决性能问题时非常方便。在 Android 平台上，android-performance-profiler是最能帮助我们的有趣插件之一。它既可以作为独立工具使用，也可以在 CI 上使用。它可以生成漂亮的报告，因此可以用它来做一些复杂的实验。
下面是一个实验示例的图片：
Almouro 对 React Native 新旧架构的比较。来源。
您还可以使用 e2e 测试自动化实验，并在本地或 CI 上生成报告。这些报告可用于相互比较解决方案。
剖析提高对应用程序的理解
如果给定操作的响应时间过长，70% 的用户 会离开您的应用程序。一旦他们离开，就不可能再回来，这可能会严重损害您的业务。仅出于这个原因，使用 iOS 和 Android 原生工具剖析您的 React Native 应用程序可能会改变游戏规则--对您的组织和用户群都是如此。
在本文中，我们介绍了如何使用 Instruments、Flipper 和 Hermes Debugger 等工具对 iOS 应用程序进行剖析，以及如何使用 Android Profiler 和 Flipper 等工具对 Android 应用程序进行剖析。如果您在跟踪和解决性能问题方面需要帮助，请给我们React Native 开发公司留言--我们的资深开发人员一定会知道如何提供帮助。
