RN flatlist快速滚动 白屏的本质

[wuyunqiang]

先有再有答案：

1. react native性能真的比H5好嘛 ？
2. rn的多线程模型有什么缺点？
3. flatlist快速滚动为什么会有空白元素？
4. 白屏的本质是什么？
5. 无论H5还是rn都有虚拟列表, 但是H5的快速滚动体验要远好于react native这个是为什么？

背景

测试机iphone 8plus 15.1系统

react native flatlist

300条数据 快速滚动效果

H5 vue-virtual-scroll-list

5000条数据 快速效果滚动 safari

H5滚动效果比RN好很多 难道H5虚拟列表没生效 是全量渲染的？

H5 dom截图

从上图可以看到 H5的确是虚拟列表而非全量创建dom。

一图胜千文

分析

多线程模型

在 react native比H5快在哪里？ 这篇文章中

我们就在线程模型,渲染方式,刷新机制, 加载方式等多个角度给大家介绍了 为什么react native性能更好。

其中对于线程模型中H5和rn有过对比：

web最大的性能瓶颈在于 主线程 做的事情太多了 虽然有合成线程和栅格化线程可以分担部分工作量 但是执行js和渲染流程绝大部分依然需要主线程来完成。

因为rn的多线程模式 JavaScript的执行和UI的渲染是在不同的线程里完成的，这打破了Web的性能极限，使应用运行更为流畅。

多线程的缺点

但在大数据量场景下，当FlatList快速滚动时，会出现问题。因为滚动触发时，UI更新是在native线程中进行的，native滑动时，需要同步知道下一屏更新的数据是什么，这就需要等待js线程计算完成, 子线程排版完成, 并通过bridge异步的将数据传递给native线程 进行多线程通信。

这其中需要涉及到事件的批处理与消息合并，序列化与反序列化，如果项目的大小布局发生变化，还会经过yoga线程将flex布局转换为native系统可以识别的原生布局信息进行UI排版。

然后native收到这些信息并完成这些步骤后 才会进行UI渲染，这些操作需要在一帧内完成，然后渲染到屏幕上。

白屏的本质

当滚动的速度越快 数据量越多 多线程的通信成本也就越高，

频繁的多线程通信，尤其是需要在一帧时间内完成，无疑会增加系统的开销，耗费更多的时间和资源。当native无法及时的完成UI渲染 也就出现了大家看到的白屏现象。

H5的优势

在看H5中因为js和dom的渲染流程都是在主线程完成的

在快速滚动的场景下 并不需要太多的js计算，也没有多线程频繁通信的性能开销，仅仅是dom复用和css样式的变化。因此在大数据的虚拟列表场景下，其性能表现优于RN的FlatList。