为啥我们的 React Native 应用在 Android 手机上使用时会变慢？

Posted 2023-05-07

【中文标题】为啥我们的 React Native 应用在 Android 手机上使用时会变慢？

【英文标题】：Why is our ReactNative app slowing down on Android phones when using?为什么我们的 React Native 应用在 Android 手机上使用时会变慢？

【发布时间】：2021-10-06 21:15:47

【问题描述】：

性能问题

我们的 ReactNative 应用 unblnd.com/app 遇到性能问题。 使用该应用几分钟后（安装后），该应用在大多数 android 手机上开始变慢。

做了什么？

A) API 请求

一些 api 请求有点慢，但查询已经改进。这些查询不会影响 iPhone 上的应用程序性能。结论可能是 api 请求并没有使应用程序滞后。

我们将在 AWS 中临时提升我们的服务器，以完全确保这不会导致问题。

B) 导航

我们发现一些消息来源指出 react-navigation v5 会很慢。因此，我们查看了导航堆栈，但使用 React Navigation v4 和 v5 时，我们得到了类似的缓慢性能：

@react-navigation/native: ^5.9.4
@react-navigation/stack: ^5.14.5
---
react-navigation: ^4.4.4
react-navigation-stack": ^2.10.4

C) 缓存/内存

使用该应用时，缓存大小从 0MB 增加到 12MB。由于 3MB 的缓存大小，该应用程序可能已经很慢了。这似乎值得怀疑，因为其他应用程序可能会占用超过 1GB 的缓存数据大小。

D) 反应上下文

我们有一个广泛的聊天系统。所有与聊天相关的屏幕都包含在一个反应​​上下文中。我们一直在将存储的数据清理到上下文中，但是对于没有太多聊天数据缓存在上下文中的用户来说，应用程序可能会很慢。因此，重复渲染过多会导致问题吗？

<ChatContext.Provider value=...>
    <Stack.Navigator>
        <Stack.Screen ...>
        x 20
    </Stack.Navigator>
</ChatContext.Provider>

React 上下文中有 20 个屏幕。关于上下文有什么好的做法吗？

待办事项：

我们将制作一个没有上下文的应用版本； 我们如何监控这些（潜在的）渲染？

E) 监控

我们开始使用Sentry Monitoring。没有提出具体问题。在 Performance 中仅显示 http 请求。有时它只是说明导航，有时缺少集成。

使用 FlatList 我们得到

VirtualizedLists 永远不应该嵌套在普通的 ScrollViews 中 相同的方向，因为它可以打破窗口和其他 功能 - 改用另一个 VirtualizedList 支持的容器。

我们可以尝试解决这个问题，但这不会导致整个应用的导航被阻塞？

F) 内存泄漏

最明显的症状。但是真的很难找出导致这种内存泄漏的原因。

在 Sentry 中，我们刚刚发现了一条关于内存泄漏的线索。我们刚刚禁用了这个组件，但 Android 手机仍然很慢。

指导

我们一直在尝试和修复许多不同的部分。任何人都有提示、想法和建议来找出导致 Android 手机运行缓慢的原因？

一般信息

npm 包： 反应：17.0.1 反应原生：0.64.2

【问题讨论】：

从你提到的所有事情来看，你似乎并没有对你的应用进行分析以查看慢的地方。这是您应该做的第一件事，使用 Profiler Chrome 调试器（不准确但给出一个想法）或 Hermes 调试器并识别需要很长时间的功能，然后从那里进行优化。

【参考方案1】：

您应该分析您的应用程序，看看是什么让事情变慢了。你提到它只是在几分钟后才开始变慢，我想我会看看这是否发生在一些可重现的事件之后。只有当你打开这个屏幕时才会发生这种情况，还是每次等等。我同意你的观点，这有内存泄漏的味道。

如果您已经使用 Sentry，您还可以使用 Sentry.Profiler 来分析组件以查看每个生命周期方法需要多长时间。