0%

React-Native性能优化

1. 大纲

1.1 线程优化

JS是单线程,不能block它,也不适合做CPU密集型工作。如果有可能尽量使用native模块或多线程技术负担JS线程工作。

1.2 渲染优化

1.2.1 React渲染
  • 减少渲染次数, 比如shoudComponentUpdate, PureComponent
  • 避免不可见内容的渲染,比如控制render的返回内容
  • 长列表的优化
1.2.2 Native渲染
  • Android上RecycleView2的使用

1.3 框架优化

1.3.1 通讯方法

  • JS Bridge的通讯的payload是JSON字符串,而且所有通讯都是占用JS Bridge,所以一方面会出现阻塞,比如滑动事件,另一方面JSON字符串的解析也会消耗计算。所以尽量不要在JS Bridge上发太多消息。随着JSI的发布,可以使用JSI代替JS Bridge, 它不需要再通过JSON字符串通讯,而是使用了共享内存通讯,而且是同步方式,效率更高。跟之前相比,需要写C++代码,但是有自动化工具可以帮助完成,比如CodeGen。
  • Bundel拆包,按需加载,和提前加载,提升页面首次渲染的性能。
  • 体积优化,使用混淆工具减少包体积。