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

React Native JS Module 加载性能优化

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

react 性能优化 阿里技术协会

摘要: 关于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的管理也会逐步增加对外查询接

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

版权声明:本文内容由互联网用户自发贡献,本社区不拥有所有权,也不承担相关法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:yqgroup@service.aliyun.com 进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。

用云栖社区APP,舒服~

【云栖快讯】哪个编程语言最热门?各个专业领域的技术趋势是什么?如何才能更快速的踏上技术进阶之路……云栖社区2017中国开发者大调查火热进行!答卷可抽奖,红轴机械键盘、天猫精灵,丰富好礼大概率抽取  详情请点击

网友评论

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

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

提供一种性能卓越、稳定、安全、便捷的计算服务,帮助您快速构建处理能力出色的应用,解放计算给服务带来的压力,使您的... 更多>

全球领先的SaaS性能测试平台,具有强大的分布式压测能力,可模拟海量用户真实的业务场景,让应用性能问题无所遁形。 更多>

一种适用于大规模并行批处理作业的分布式云服务。可支持海量作业并发规模,系统自动完成资源管理,作业调度和数据加载,... 更多>

为您提供简单高效、处理能力可弹性伸缩的计算服务,帮助您快速构建更稳定、安全的应用,提升运维效率,降低 IT 成本... 更多>
安全技术百问

安全技术百问