React Native：FlatList快速滚动时JS帧丢帧多于UI帧的原因

背景 #

某学士论文针对包含1000个图文项的React Native FlatList滚动场景开展基准测试，记录了UI帧率（UI fps）和JS帧率（JS fps）。查阅React Native官方性能文档后，仍未明确滚动时JS帧丢帧比UI帧更严重的原因。论文作者指出FlatList的内存优化机制会在高速滚动时渲染空白占位符，导致JS线程帧率显著下降，但未说明根本原因。有人推测频繁的渲染与卸载操作产生开销导致丢帧，但按常规理解UI线程丢帧应更严重。

参考素材 #

• 测试数据图表：
• FlatList单项结构：

核心问题 #

无其他后台任务阻塞JS线程时，结合论文数据，FlatList快速滚动时JS帧丢帧多于UI帧的原因是什么？

原因分析 #

• JS线程承担内存优化的核心逻辑负载
  FlatList的"窗口化渲染"逻辑（仅渲染可视区域内的项，超出区域的项卸载并替换为占位符）完全运行在JS线程。高速滚动时，JS线程要串行执行一系列CPU密集型任务：计算可视区域范围、判断项的挂载/卸载状态、创建/销毁组件实例、处理占位符的渲染逻辑、更新列表数据源映射关系。滚动速度越快，这些任务的积压越严重，直接导致JS帧率下降。

• UI线程渲染任务更轻量化且有硬件加速加持
  UI线程仅负责接收JS线程传递的原生视图指令，调用系统原生渲染管线完成绘制。而且UI线程的渲染操作大多能借助平台硬件加速（如GPU渲染图层），系统原生层还会通过视图复用池、图层缓存等机制降低视图创建/销毁的开销。相比之下，JS线程的组件实例管理、虚拟DOM diff都是纯JS层面的串行操作，无法直接利用硬件加速，任务密集时极易卡顿。

• 占位符带来额外JS层开销
  论文提到的空白占位符，其创建、状态管理、与列表布局的协调逻辑均在JS线程处理。高速滚动时，占位符的创建/销毁频率和真实列表项几乎一致，相当于JS线程要同时处理"旧项卸载+新项挂载+占位符切换"三重任务，进一步加重负载；而UI线程仅需绘制占位符这个简单视图，开销可忽略不计。

• 高频更新下React diff算法的额外开销
  每次列表项挂载/卸载时，React都会执行虚拟DOM的diff操作。尽管FlatList通过key属性做了复用优化，但高速滚动时短时间内大量组件的状态变化、虚拟DOM节点对比，依然会消耗JS线程大量CPU时间。UI线程无需处理虚拟DOM，直接操作原生视图，不存在这层额外开销。

内容的提问来源于stack exchange，提问作者MinisX