ReactNative 启动优化实践

Dive into React Native performance
阐述了基于RN实现的页面各部分加载时间占比图

image

页面加载流程图（引用）

image

从业务视角可以归纳为四个部分

分包
- 分业务分包：页面维度单独成包，避免大文件包
- 分层分包：页面和组件拆分，便于复用，同时也减少了整体体积
拆包
- 一种方案，将一个包整体的index.js，拆分成一个入口+多个子模块，从而实现页面模块维度懒加载功能，减少页面首次加载时间，webpack和react loadable都有提供了切割能力
- 另一种方案，RAM bundles和内联引用
  - RAM bundles：Indexed RAM Bundle和File RAM Bundle两种实现，将每个模块拆分为独立文件
  - 内联引用（inline requires）：内联引用(require 代替 import)可以延迟模块或文件的加载，直到实际需要该文件。
包大小优化
- 包大小分析工具
- 引入tree-shaking将无用代码删除
- 静态资源压缩，重点图片

数据层
- 本地化数据优化，数据缓存、前一个页面数据带入后一个数据
- 数据请求异步加载，且尽可能提前请求，譬如执行js加载到内存
模块层
- 模块=页面一个个模块，对于复杂或者长的页面，简单理解可以是预先加载可见模块，然后在加载非可见模块。
组件层
- 减少重复渲染，例如pureComponent、Immutablejs、列表 & Key、慎用setState
- 其它React布局和渲染的一些常规优化

官方推出的FlatList及SectionList的一些问题

元素懒加载：元素只有出现在屏幕中，才会被初始化出来。
无复用池机制：且初始化后不销毁：在元素离开可视范围后，会被同尺寸的空白元素替换，但是不会被销毁。另外FlatList中item的viewTree并没有真实复用，随着滚动渲染出来的viewTree越来越多，内存开销过大容易出现OOM
异步渲染：在空白元素滚动到可视区域后，会进行UI渲染，先创建了一个等高空白容器，然后整个cell的viewTree异步渲染完成后再添加到空白容器内。所以快速滑动的时候，由于异步任务堆积，导致无法快速展现出现白屏。

官方对列表的一些配置推荐和实现建议 Optimizing Flatlist Configuration

Props
- maxToRenderPerBatch，最大预加载数，即屏幕外渲染的Item数目
- updateCellsBatchingPeriod，批量更新Cell周期，即批处理更新时间频率
- initialNumToRender，初始化最大渲染数
List Items
- 尽可能使用基础组件、轻量化组件，Item尽可能低层级、少逻辑
- 使用shouldComponentUpdate来优化diff判断，从而减少重复渲染
- 图片控件缓存优化，例如推荐react-native-fast-image优秀的图片控件
- 通过getItemLayout告知高度，减少layout时间
- 使用列表 & Key，加速更新Diff计算
- 避免匿名函数，每一个函数是一个新的对象

列表实践过程中的思考

实现Cell复用：一种思路是Native列表 + RN Cell，借助Native列表实现Cell复用能力，需要做以下几个事情

Native与RN通信频繁是带来白屏的主要原因，那么可以结合一些特定的业务场景进行一些优化

新一代的RN重构框架Fabric会重点优化线程通信效率，敬请期待
RN侧自己感知View变更，作出更新操作，而不全依靠Native通知，从而减少通信。例如顶部、底部上下移动带来新的View渲染，点击回到顶部，直接服用首页View等RN侧处理操作
快速滑动限速，一般来说快速滑动是一个非常规操作，我们可以将速度限制到合理范围，减少过多的异步任务并发出发

参考：
React Native之启动流程
Tree-Shaking性能优化实践 - 原理篇
ReactNative 性能