小编Xen*_*nor的帖子

找出性能问题

在过去的几天里,我一直在我创建的应用程序中解决 FlatList 的性能问题。

FlatList 由静态标题和 x 行组成。在测量的情况下,有 62 行,每行都由 4 个组件组成 - 其中一个使用了 4 次,总计为 7 个行单元格。此列表的每个单元格都是 TouchableNativeFeedback 或 TouchableOpacity(出于测试目的,那些附加() => null到 onPress。在几个级别(列表容器、行、单个单元格)上使用了 shouldComponentUpdate,我认为渲染性能对于这种列表来说已经足够好了。

对于我使用的一致测量initialNumToRender={data.length},因此整个列表一次呈现。列表是使用按钮呈现的,数据加载不是我测量的一部分 - 它被预加载到组件本地状态。

根据附加的 Chrome 性能配置文件 JS 线程需要 1.33 秒来呈现组件。我使用 CPU 减速 x6 来更准确地模拟 Android 设备。

然而,列表显示在设备上大约 15 秒的标记处,因此从按下按钮到列表显示的实际渲染需要超过 14 秒!

我想弄清楚的是 JS 渲染组件和实际显示在屏幕上的组件之间会发生什么,因为设备在那段时间没有响应。每个触摸事件都会被注册,但只有当列表最终出现在屏幕上时才会播放。

我已经附加了来自 chrome 开发工具的跟踪,使用 android systrace 工具获取的 systrace 和来自 android profiler 的屏幕(遗憾的是我找不到导出后者的选项)。

跟踪几乎同时运行 - 顺序是 systrace、android profiler、chrome dev tools。

我应该采取哪些步骤来帮助我了解应用程序冻结时发生的情况?

简单复现应用(src.js中的代码,第一次提交)

Chrome 性能配置文件 Chrome 性能配置文件

Systrace HTML Systrace HTML

安卓分析器 安卓分析器

react-native react-native-android

5
推荐指数
1
解决办法
1574
查看次数

标签 统计

react-native ×1

react-native-android ×1