在过去的几天里,我一直在我创建的应用程序中解决 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。
我应该采取哪些步骤来帮助我了解应用程序冻结时发生的情况?