## 前言大家好，想必大家都知道**页面首屏加载耗时越少，跳失率越低，PV和交易额也就越高**，对于开发来说这是一个关键指标，也是需要持续做功的优化点。 ## RN页面首屏加载流程 ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a937360a776a4fef97f9da07ea9bd05d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6L-Y5piv5LiA5Y-q5bCP54mb:q75.awebp?rk3s=f64ab15b&x-expires=1763211287&x-signature=YVHPLHUBJi6y2U%2BLigQUXdQck8Q%3D) 1. **路由跳转**：路由拦截器中可以做些预处理的逻辑。 2. **Native容器创建**：该过程一般耗时很少。 3. **Bundle下载**：对于大型业务来说，RN的bundle一般都在远程，加载本地包的同时校验下载远程包。下载耗时与bundle体积呈正相关。 4. **RN引擎初始化**：初始化C++层的JS引擎环境，创建Java与JavaScript的双向通信通道。 5. **Bundle加载**：加载bundle到JS引擎中，体积越大，加载越耗时。 6. **组件执行**：解析执行JS，render中的控件映射为Native视图，该过程耗时长短取决于页面的复杂度。 7. **请求数据**：通过接口请求真实的数据。 8. **页面刷新**：根据数据刷新页面。在做性能优化前，注意提前打点记录各阶段耗时，为每一次的优化提供直观可信的数据支撑。 ## 性能优化 ### 1. 包体积缩减 **主要做功阶段：Bundle下载、Bundle加载。** 推荐先使用[react-native-bundle-visualizer](https://github.com/callstack/react-native-bundle-visualizer)分析bundle体积构成，统计所有不符合预期的文件引入。 ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e12107245afc42119708835f9e288124~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6L-Y5piv5LiA5Y-q5bCP54mb:q75.awebp?rk3s=f64ab15b&x-expires=1763211287&x-signature=sUP9qTMa2GBtxRWdTOGEnHomryw%3D) #### 1.1. 常规手段 * 整理已下线的实验和不会再使用到组件，统一下线。 * 代码层面要注意使`tree-shaking`生效，避免模块整体引入。 * 图片等资源文件放到远程。 * bundle压缩为zip包，降低网络传输耗时。 #### 1.2. 拆包 bundle中必然会有一些不常更新的二方或三方库，如已成熟UI组件库、react-native库等，这部分可单独放到一个bundle中，不必参与每次的发版更新。 **注意点**：需要改写`ReactInstanceManager`加载bundle逻辑，在页面加载时将两个bundle加载到同一个JS环境中，具体实现可参考`CatalystInstanceImpl#runJSBundle`。 ### 2. 引擎优化 **主要做功阶段：RN引擎初始化，Bundle加载，组件执行** #### 2.1. 引擎复用根据React官方统计，在页面创建过程中耗时主要集中在JS环境初始化阶段（JS Init + Require）。 ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7ffd8801632d49659be356c317eec33d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6L-Y5piv5LiA5Y-q5bCP54mb:q75.awebp?rk3s=f64ab15b&x-expires=1763211287&x-signature=D5hBSnWx1IjJlt6jjSztBplupyE%3D)\ JS环境初始化阶段可以细分为： * 创建JS引擎，该过程涉及加载so文件和初始化JS执行环境，建立Java和JavaScript之间的双向通信通道。 * 注册`ViewMangers`、`NativeModules`。 * 加载JSBundle到内存中。 * 解析并初始化组件并联的JS/TS文件。引擎复用本质就是JS执行环境的复用，可以完美的避免该过程重复执行，能够大幅缩减页面加载耗时。 **示例**：可以创建引擎池，为不同的bundle提供引擎复用能力。 ```kotlin object ReactInstancePool { private val instanceMap = mutableMapOf() // 不同bundle之间引擎应该隔离，否则会相互污染 fun getInstanceByName(bundleName: String) : ReactInstanceManager { // 先从缓存中根据bundleName取 if (instanceMap.containsKey(bundleName)) { return instanceMap[bundleName]!! } // 注册bundleName所需的ViewManager和 val packages: ArrayList = PackageList(MobileApplication.instance).packages packages.add(object : ReactPackage { override fun createNativeModules(reactContext: ReactApplicationContext): MutableList { return mutableListOf() } override fun createViewManagers(reactContext: ReactApplicationContext): List { return mutableListOf() } }) // 缓存中没有，就创建一个 val mReactInstanceManager = ReactInstanceManager.builder() .setApplication(MobileApplication.instance) .setJSBundleFile("assets://$bundleName") .addPackages(packages) .setJavaScriptExecutorFactory(HermesExecutorFactory()) .setInitialLifecycleState(LifecycleState.BEFORE_CREATE) .build() instanceMap[bundleName] = mReactInstanceManager return mReactInstanceManager } } ``` **注意点**：业务在使用时有些问题需要主动规避，比如常见的全局属性问题。 ```tsx import React, { useEffect, useState } from 'react'; import { AppRegistry, Text, View, TouchableWithoutFeedback } from 'react-native'; // 只会在JS初始化时赋值为1 let num = 1; const HelloWorld = () => { const [count, setCount] = useState(num); useEffect(() => { num = count; }, [count]) return ( { // 每点击一次同步到state和全局变量中 setCount(count + 1); }}> { setCount(count + 1); }}>{`Hello, World 次数：${count}`} ); }; ``` num只会在引擎初始化时被赋值为1，后续引擎复用场景使用的是上一个页面污染过的数据值。 ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/351c50980e4c4ad5a325fd672e262f55~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6L-Y5piv5LiA5Y-q5bCP54mb:q75.awebp?rk3s=f64ab15b&x-expires=1763211287&x-signature=zU2ScVdhIg833Gv1qAid3JzkYOo%3D) #### 2.2. 引擎预热提前预判用户可能进入的下一个页面，预先创建对应的JS引擎环境。 ```kotlin fun preload(bundleName: String, curAc: Activity) { val tmpRootView = DebugReactRootView(curAc) val mReactInstanceManager = ReactInstanceManager.builder().xxx().build() // 预热环境：初始化引擎、加载bundle tmpRootView.startReactApplication(mReactInstanceManager, "", null) instanceMap[bundleName] = mReactInstanceManager tmpRootView.unmountReactApplication() } ``` ### 3. 专项优化 #### 3.1. 包下载 * 不常更新的bundle优先内置。 * app启动时开始下载bundle，若担心影响首页渲染流程，可延迟到路由拦截器中。 * 预判用户接下来可能使用的bundle，提前预下载。 #### 3.2. 请求数据 * **预请求**：正常流程是bundle加载 → 组件执行 → 请求数据，如果Native容器能提前感知到RN要请求的接口和参数，完全可以在bundle加载前发起请求，等RN真实请求时直接使用缓存即可。可以自定义DSL接口配置文件与Bundle文件一起下发给用户。 { "method": "GET", "api": "/rn/test", "startAppVersion": "8.12.26", // 启用的版本 "params": { "id": "${URL.id}", // 从页面url中获取id参数 "lat": "#{lat}", // 调用本地api取设备纬度信息 "sceneKey": "test" // 固定传参 } } * **降低接口耗时**：推后端和算法一起降低接口耗时。 #### 3.3. 组件执行 * **内联引用** 组件执行时会逐个解析执行import的JS文件，可以通过`require`延迟到实际需要该文件。 ```tsx import React, { Component } from 'react'; import { TouchableOpacity, View, Text } from 'react-native'; let VeryExpensive = null; export default class Optimized extends Component { state = { needsExpensive: false }; didPress = () => { // 点击时再加载 if (VeryExpensive == null) { VeryExpensive = require('./VeryExpensive').default; } this.setState(() => ({ needsExpensive: true, })); }; render() { return ( Load {this.state.needsExpensive ? : null} ); } } ``` * **RAM bundle** 如果一个bundle过大，可以将bundle拆分为多个JS文件，当真正使用时再去加载，具体可参考[RAM Bundles 和内联引用优化 · React Native 中文网](https://reactnative.cn/docs/ram-bundles-inline-requires) > tips: 如果bundle仅含单页面，此举优化效果不明显。 #### 3.4. 视觉优化视觉优化包含Activity弹出动画、骨架屏等效果，目的就是缓解用户情绪，使之有耐心等待更长的时间。一个行之有效的方式是在RN bundle加载过程中先让Native容器展示缓存页面，等待RN渲染完成之后再移除Native侧的展示。 #### 3.5. 新架构官方已经提供了新架构，可大幅提升加载性能，推荐大家尽早升级。[为何要设计新架构 · React Native 中文网](https://reactnative.cn/docs/the-new-architecture/why#%E6%96%B0%E6%9E%B6%E6%9E%84%E7%9A%84%E6%94%B9%E8%BF%9B) ### 4. 最后希望以上的优化措施能为你带来些许启发，如果你有更好的优化手段，欢迎留言一起探讨\~