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

相关推荐
fishmemory7sec3 分钟前
Electron 主进程与渲染进程、预加载preload.js
前端·javascript·electron
fishmemory7sec5 分钟前
Electron 使⽤ electron-builder 打包应用
前端·javascript·electron
豆豆1 小时前
为什么用PageAdmin CMS建设网站?
服务器·开发语言·前端·php·软件构建
twins35202 小时前
解决Vue应用中遇到路由刷新后出现 404 错误
前端·javascript·vue.js
qiyi.sky2 小时前
JavaWeb——Vue组件库Element(3/6):常见组件:Dialog对话框、Form表单(介绍、使用、实际效果)
前端·javascript·vue.js
煸橙干儿~~2 小时前
分析JS Crash(进程崩溃)
java·前端·javascript
安冬的码畜日常2 小时前
【D3.js in Action 3 精译_027】3.4 让 D3 数据适应屏幕(下)—— D3 分段比例尺的用法
前端·javascript·信息可视化·数据可视化·d3.js·d3比例尺·分段比例尺
l1x1n03 小时前
No.3 笔记 | Web安全基础:Web1.0 - 3.0 发展史
前端·http·html
昨天;明天。今天。3 小时前
案例-任务清单
前端·javascript·css
zqx_74 小时前
随记 前端框架React的初步认识
前端·react.js·前端框架