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 的提升,对于这方面你有什么方法呢?

相关推荐
QQ1__8115175155 小时前
Spring boot名城小区物业管理系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】
前端·vue.js·spring boot
钛态5 小时前
前端微前端架构:大项目的救命稻草还是自找麻烦?
前端·vue·react·web
一粒黑子5 小时前
【实战解析】阿里开源 PageAgent:纯前端 GUI Agent,一行JS让网页支持自然语言操控
前端·javascript·开源
独角鲸网络安全实验室5 小时前
2026微信小程序抓包全解析:从实操落地到合规风控,解锁前端调试新范式
前端·微信小程序·小程序·抓包·系统代理绕过·https证书严格校验·进程隔离
紫微AI5 小时前
前端文本测量成了卡死一切创新的最后瓶颈,pretext实现突破了
前端·人工智能·typescript
GISer_Jing5 小时前
AI前端(From豆包)
前端·aigc·ai编程
IT枫斗者5 小时前
前端部署后如何判断“页面是不是最新”?一套可落地的版本检测方案(适配 Vite/Vue/React/任意 SPA)
前端·javascript·vue.js·react.js·架构·bug
测试修炼手册5 小时前
[测试技术] 深入理解 JSON Web Token (JWT)
前端·json
AI老李5 小时前
2026 年 Web 前端开发的 8 个趋势!
前端
里欧跑得慢5 小时前
15. Web可访问性最佳实践:让每个用户都能平等访问
前端·css·flutter·web