Web 开发有一个经典问题:「浏览器中从输入 URL 到页面渲染的这个过程中都发生了什么?」
据我考据这个问题起码有十年历史了。在日新月异学不动的前端圈子里,这个问题能一直被问,就是因为因为它是个非常好的问题,涉及非常多的知识点,平时做一些性能优化,都可以从这个问题出发,分析性能瓶颈,然后对症下药进行优化。
不过今天我们不谈 Web 的性能优化,只是借助刚刚的那个那个经典问题的分析思路,从 React Native 的启动到页面的第一次渲染完成,结合 React Native 的源码和 1.0 的新架构,一一分析 React Native 的启动性能优化之路。
如果你喜欢我的文章,希望点赞👍 收藏 📁 评论 💬 三连支持一下,谢谢你,这对我真的很重要!
阅读提醒:
1.文章中的源码内容为 RN 0.64 版本
2.源码分析内容涉及
Objective-C
、Java
、C++
、JavaScript
四门语言,我尽量讲得通俗易懂一些,若实在不理解可以直接看结论
0.React Native 启动流程
React Native 作为一个 Web 前端友好的混合开发框架,启动时可以大致分为两个部分:
- Native 容器的运行
- JavaScript 代码的运行
其中 Native 容器启动在现有架构(版本号小于 1.0.0)里:大致可以分为 3 个部分:
- Native 容器初始化
- Native Modules 的全量绑定
- JSEngine 的初始化
容器初始化后,舞台就交给了 JavaScript,流程可以细分为 2 个部分:
- JavaScript 代码的加载、解析和执行
- JS Component 的构建
最后 JS Thread 把计算好的布局信息发送到 Native 端,计算 Shadow Tree,最后由 UI Thread 进行布局和渲染。
关于渲染部分的性能优化可以见我之前写的《React Native 性能优化指南》,我从渲染、图片、动画、长列表等方向介绍了 RN 渲染优化的常见套路,感兴趣的读者可以前往查看,我这里就不多介绍了。
上面的几个步骤,我画了一张图,下面我以这张图为目录,从左向右介绍各个步骤的优化方向:
提示:React Native 初始化时,有可能多个任务并行执行,所以上图只能表示 React Native 初始化的大致流程,并不和实际代码的执行时序一一对应。
1.升级 React Native
想提升 React Native 应用的性能,最一劳永逸的方法就是升级 RN 的大版本了。我们的应用从 0.59 升级到 0.62 之后,我们的 APP 没有做任何的性能优化工作,启动时间直接缩短了 1/2。当 React Native 的新架构发布后,启动速度和渲染速度都会大大加强。
当然,RN 的版本升级并不容易(横跨 iOS Android JS 三端,兼容破坏性更新),我之前写过一篇《React Native 升级指南(0.59 -> 0.62)》的文章,如果有升级想法的老铁可以阅读参考一下。
2.Native 容器初始化
容器的初始化肯定是从 APP 的入口文件开始分析,下面我会挑选一些关键代码,梳理一下初始化的流程。
iOS 源码分析
1.AppDelegate.m
AppDelegate.m
是 iOS 的入口文件,代码非常精简,主要内容如下所示:
// AppDelegate.m
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// 1.初始化一个 RCTBridge 实现加载 jsbundle 的方法
RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
// 2.利用 RCTBridge 初始化一个 RCTRootView
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
moduleName:@"RN64"
initialProperties:nil];
// 3.初始化 UIViewController
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
// 4.将 RCTRootView 赋值给 UIViewController 的 view
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
return YES;
}
总的来看入口文件就做了三件事:
- 初始化一个
RCTBridge
实现加载 jsbundle 的方法 - 利用
RCTBridge
初始化一个RCTRootView
- 将
RCTRootView
赋值给UIViewController
的 view 实现 UI 的挂载
从入口源码我们可以发现,所有的初始化工作都指向 RCTRootView
,所以接下来我们看看 RCTRootView
干了些啥。
2.RCTRootView
我们先看一下 RCTRootView
的头文件,删繁就简,我们只看我们关注的一些方法:
// RCTRootView.h
@interface RCTRootView : UIView
// AppDelegate.m 中用到的初始化方法
- (instancetype)initWithBridge:(RCTBridge *)bridge
moduleName:(NSString *)moduleName
initialProperties:(nullable NSDictionary *)initialProperties NS_DESIGNATED_INITIALIZER;
从头文件看出:
RCTRootView
继承自UIView
,所以它本质上就是一个 UI 组件;RCTRootView
调用initWithBridge
初始化时要传入一个已经初始化的RCTBridge
在 RCTRootView.m
文件里,initWithBridge
初始化时会监听一系列的 JS 加载监听函数,监听到 JS Bundle 文件加载结束后,就会调用 JS 里的 AppRegistry.runApplication()
,启动 RN 应用。
分析到这里,我们发现 RCTRootView.m
只是实现了对 RCTBridge
的的各种事件监听,并不是初始化的核心,所以我们就又要转到 RCTBridge
这个文件上去。
3.RCTBridge.m
RCTBridge.m
里,初始化的调用路径有些长,全贴源码有些长,总之最后调用的是 (void)setUp
,核心代码如下:
- (Class)bridgeClass
{
return [RCTCxxBridge class];
}
- (void)setUp {
// 获取bridgeClass 默认是 RCTCxxBridge
Class bridgeClass = self.bridgeClass;
// 初始化 RTCxxBridge
self.batchedBridge = [[bridgeClass alloc] initWithParentBridge:self];
// 启动 RTCxxBridge
[self.batchedBridge start];
}
我们可以看到,RCTBridge
的初始化又指向了 RTCxxBridge
。
4.RTCxxBridge.mm
RTCxxBridge
可以说是 React Native 初始化的核心,我查阅了一些资料,貌似 RTCxxBridge
曾用名为 RCTBatchedBridge
,所以可以粗暴的把这两个类当成一回事儿。
因为在 RCTBridge
里调用了 RTCxxBridge
的 start
方法,我们就从 start
方法来看看做了些什么。
// RTCxxBridge.mm
- (void)start {
// 1.初始化 JSThread,后续所有的 js 代码都在这个线程里面执行
_jsThread = [[NSThread alloc] initWithTarget:[self class] selector:@selector(runRunLoop) object:nil];
[_jsThread start];
// 创建并行队列
dispatch_group_t prepareBridge = dispatch_group_create();
// 2.注册所有的 native modules
[self registerExtraModules];
(void)[self _initializeModules:RCTGetModuleClasses() withDispatchGroup:prepareBridge lazilyDiscovered:NO];
// 3.初始化 JSExecutorFactory 实例
std::shared_ptr<JSExecutorFactory> executorFactory;
// 4.初始化底层 Instance 实例,也就是 _reactInstance
dispatch_group_enter(prepareBridge);
[self ensureOnJavaScriptThread:^{
[weakSelf _initializeBridge:executorFactory];
dispatch_group_leave(prepareBridge);
}];
// 5.加载 js 代码
dispatch_group_enter(prepareBridge);
__block NSData *sourceCode;
[self
loadSource:^(NSError *error, RCTSource *source) {
if (error) {
[weakSelf handleError:error];
}
sourceCode = source.data;
dispatch_group_leave(prepareBridge);
}
onProgress:^(RCTLoadingProgress *progressData) {
}
]