React Native JS Module 加载性能优化

  1. 云栖社区>
  2. 博客列表>
  3. 正文

React Native JS Module 加载性能优化

龙冥 2016-01-25 11:46:30 浏览18784 评论4

摘要: 关于React Native 性能 React Native 在手淘中已开始逐步推广, 在拍立淘首页的使用场景中,我们发现React Native并没有想 象中的那么快,实测效果在离线状态下性能甚至比不过H5 WindVane,React Native的UI会出现延迟渲 染存在视觉差,经过具体

关于React Native 性能

React Native 在手淘中已开始逐步推广, 在拍立淘首页的使用场景中,我们发现React Native并没有想

象中的那么快,实测效果在离线状态下性能甚至比不过H5 WindVane,React Native的UI会出现延迟渲

染存在视觉差,经过具体的代码性能测试,整个过程平均在300 ms (IPhone 5S机型下,整个JS文件

400K), 然后其核心系统调用代码加载解析整个JS (JSEvaluateScript)耗时在220 ms左右,在目前

手淘的使用场景中,每个业务独立发布的JS大小都在400K左右,其中大部分属于系统接口JS,业务JS

的逻辑代码只占很小一部分,每个业务都创建RCTBridge 独立加载整个400K JS文件,重复的加载过程

和过大的离线JS文件(系统JS冗余)对性能和存储空间造成极大的开销,因此,优化拆分整个JS,动

态加载业务JS,管理JS缓存,避免重复加载,成为了优化React Native性能的核心。

React Native 优化设计

在实践过程中,将系统部分JS抽离出来打入APP本地资源中,初始化过程中先加载本地系统资源JS模

块,为了避免系统JS资源的释放和缓存的重复使用,RCTBridge 采用共享单例的设计模式实现,所有业

务方共享使用全局RCTBridge,共享使用优先加载系统JS缓存,动态管理加载每个业务方Module

URL到缓存并重复使用,根据每个业务JS的使用情况,动态管理缓存队列,清理缓存中长期未使用的业

务JS Module。

React Native 优化实现细节

技术上采用类扩展去除对源码的任何影响,RCTBridge (bizModule)通过单例模式实现系统JS的预先加

载和共享,代码示例如下:

`+ (instancetype)sharedBridge {

static dispatch_once_t pred;
static RCTBridge *instance;
dispatch_once(&pred, ^{
    NSURL *bundleURL = [[NSBundle mainBundle] URLForResource:@"system_ios" 

withExtension:@"js"];

    instance = [[RCTBridge alloc] initWithBundleURL:bundleURL moduleProvider:nil launchOptions:nil];
    instance.viewBindings = [[NSMutableDictionary alloc] init];
});
return instance;

} `

同时增加对外接口加载业务JS Module,建立从Module URL到Module Name 的缓存MAP关系,未加载

此Module则加载此Module URL,加载过则直接回调rootView bundleFinishedLoading加载显示

rootView,采用此种回调是为了避免影响原有逻辑NSNotificationCenter的通知,通过

RCTJavaScriptLoader 加载JS,调用javaScriptExecutor executeApplicationScript, 修改

RCTSourceCode,去除 jsDisplayLink和javaScriptExecutor executeJSCall:@"BatchedBridge"

method:@"flushedQueue" 的重复调用,接口函数如下:

`- (void)loadModuleURL:(NSURL )bundleURL moduleName:(NSString )moduleName rootView:
(RCTRootView *)rootView`

同时扩展RCTRootView (bizModule) 增加入口函数(去除对原有代码结构的影响):

`- (instancetype)initWithModuleURL:(NSURL )moduleURL moduleName:(NSString )moduleName launchOptions:(NSDictionary *)launchOptions {

RCTBridge *bridge = [RCTBridge sharedBridge];
[bridge loadModuleURL:moduleURL moduleName:moduleName rootView:self];
return [self initWithBridge:bridge moduleName:moduleName];

}`

React Native 后续优化方向:

目前基于此优化之后,在拍立淘首页运营的React JS性能评测从之前的300ms,优化到目前50ms以

内(IPhone 5S机型下已感觉不到视觉差),预计下个版本上线后会加入准确的性能埋点统计,优化后

续考虑加入Module JS 缓存机制,长久未使用的Module JS 会自动清理,经常使用的Module JS 会常驻

内存中,避免业务Module JS的重复加载所带来的开销,Module JS的管理也会逐步增加对外查询接

口,更新接口,注册预先加载接口等功能 ,一些新的想法和优化思路大家可以一起交流探讨。

用云栖社区APP,舒服~

【云栖快讯】云栖社区技术交流群汇总,阿里巴巴技术专家及云栖社区专家等你加入互动,老铁,了解一下?  详情请点击

网友评论

1F
傻傻的代码

非常感谢,有没有Android相关分享呢?

cnsnake11

android的可以参考 https://github.com/cnsnake11/blog/blob/master/ReactNative%E5%BC%80%E5%8F%91%E6%8C%87%E5%AF%BC/ReactNative%E5%AE%89%E5%8D%93%E9%A6%96%E5%B1%8F%E7%99%BD%E5%B1%8F%E4%BC%98%E5%8C%96.md

傻傻的代码

感谢

评论
2F
willard9107

hi,麻烦问一下,如果共享全局的ReactBridge,业务的JS Module如果被加载了,那么怎么被清理掉呢

3F
天天淡定的

你好,我想了解下你是如何将系统js 跟业务js分拆打包的?

4F
tyrionsong

你好,我想问一下你是如何去测试加载性能的?

龙冥
文章2篇 | 关注2
关注
Node.js 性能平台(Node.js Performance Platform)是面向中... 查看详情
提供一种性能卓越、稳定、安全、便捷的计算服务,帮助您快速构建处理能力出色的应用,解放计算给服... 查看详情
全球领先的SaaS性能测试平台,具有强大的分布式压测能力,可模拟海量用户真实的业务场景,让应... 查看详情
为您提供简单高效、处理能力可弹性伸缩的计算服务,帮助您快速构建更稳定、安全的应用,提升运维效... 查看详情
建站4折

建站4折