React Native性能瓶颈之JS 引擎

我们应该知道 React Native 其实就是 Native 的一个 JS 文件，也就是说可以通过扩展 JavaScript Engine, 使它具备强大的本地资源和原生接口调用能力，然后结合 JavaScript 丰富的库和社区和及其稳定的跨平台能力，把 JavaScript 的魔力在浏览器之外的地方充分发挥出来。

这里也要稍作说明，Native 是不能直接运行 JS 文件的，JS 文件也可以称之为 JSBundle，所以我们需要一个 JavaScript Engine 。这里其实就会出现问题，初始化 JavaScript Engine 和加载 bundle 是比较耗时的，这两点也会直接影响了白屏时常和首屏加载时长，所以我们需要在 JavaScript Engine 和 bundle 加载上下功夫。

对于我们的用 React Native 开发的移动应用来讲，用户的使用体验是比较关键的考虑因素，如果时常出现白屏和转圈的现象是非常扣分的，所有有一个流畅甚至秒开的使用体验是我们开发者应该去深入探究的。

那到这里我们就应该分析和整理下，对于 React Native 应用打开一个页面的一个运行流程是怎么样的？

其实梳理发现，打开一个页面基本上都是加载 bundle -> 初始化请求 -> 页面渲染，其中在加载bundle、初始化请求和渲染过程中，都有能够优化的地方。

这里我们主要去分析加载 bundle 这个过程。

React Native 应用的启动流程

我们以 Android 下的 React Native 应用为例，启动流程如下：

如果简要的描述其实就分为四个主要的流程：

1、创建 JavaScript Engine 

2、加载 JSBundle （JS 文件）

3、启动 React Native 应用

4、渲染组件和页面

再从流程中耗时角度来看的话，创建 JS 引擎和加载 JSBundle 是最为耗时的，也是需要我们进行深入进行优化的。

React Native 应用性能提升的办法

1、使用最新版

React Native 应用默认使用的 JavaScriptCore 作为 JavaScript Engine。但是随着新版本的发布，JavaScriptCore 的性能也在不断提升。我们升级到最新版本的 React Native，是可以获得 JavaScript 引擎方面的性能提升。这是最为基础的一个方式，也是我们在开展其他优化方法的基础工作。

2、引擎的预加载

引擎预加载更加通俗直白的讲就是在 Native 还没有开始进行 React Native 页面流程的时候，预先对 JSbundle（JS文件）进行加载，这样做的原因是可以从一定程度上减少 Native 进入 React Native 页面时初始化占用的时间。

3、引擎的复用

引擎复用也是在初始化阶段进行的优化手段，例如我们有 A 页面和 B 页面，我们从 A 页面进入到 React Native 的 B 页面，当我们从 B 页面回到 A 页面，这个时候 B 页面的引擎是没有回收的，这样就给了我们复用引擎的机会。再当我们从 A 页面到 B 页面的时候，可以直接用这个引擎，反应速度会更加快速。我们可以从下面的这个图进行查阅：

4、代码优化

我们也可以规范代码来实现性能的提升，一是应用组件化方式规范代码，这个怎么理解呢？组件化的意思是将一些公共的组件进行抽离形成独立的组件库，这样组件库可以称为独立包，从而提升了代码的复用率，也能够在一定程度上减小我们 App 的体积大小。二是我们可以避免复杂的计算逻辑，尽量将复杂计算提前完成，不要放在渲染过程中，另外也应避免使用会触发重复渲染的代码模式。

以上是基于 React Native 性能优化上对于 JavaScript Engine 的提升，对于这方面你有什么方法呢？

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！