ReactNative For Android 项目实战总结

作者:王少鸣

Android Qzone 6.1版本在情侣空间涉水React Native,以动态插件方式将情侣空间进行React Natived的改造。在情侣空间基础上,Android Qzone 6.2版本以融合的方式将话题圈进行React Native改造。本文主要讲述话题圈的开发改造流程,相关数据对比及性能优化,本次改造ReactNative基于15Release。

一.Android侧项目整体开发流程

二.ReactNative改造后话题圈整体流程

三.ReactNative性能优化之路

本次版本开发周期较赶,加上视频组件本身相对复杂,融入ReactNative耗时较多,部分优化规划在二期实施。

1.包精简

版本对比: 情侣独立插件:7.2m。 话题圈:本次ReactNative框架移植入Qzone整体仅加大了3.2m。 主要优化点: 1)去除了小平台so库。 2)复用Qzone support jar。 二期规划: 1)在Qzone与ReactNative中间加Adapter,使ReactNative适配Qzone本身网络库及图片库,可以废弃ReactNative框架的okhttp库及fresco库,减少包大小。

2.首屏加速与启动速度

版本对比: ReactNative改造后话题圈在wifi及缓存优化下,首屏相比H5快约 108ms,并且由于jsbundle缓存到本地,并且可以实现离线访问。 ReactNative话题圈数据:

主要优化点: 1)更改源码,新增预初始化接口,在Qzone Feeds渲染完成预加载ReactNative上下文。 2)首屏数据需要等前端走网络请求拉取存本地,H5优先采用本地数据渲染。 优化前后流程对比:

二期规划: 1)目前为控制内存预加载ReactNative仅是上下文,打开仍有一部分耗时,这里可以尝试缓存View,在打开时直接addview,达到秒开。 2)数据预拉取走的为http通道,可以使用wns httpproxy加速。

3.FPS

版本对比: H5话题圈:avgFPS=54 ReactNative话题圈:avgFPS=52 主要优化点: 1)JS层使Listview控件渲染数据,废弃使用ScrollView控件。 2)DOM元素设置透明背景。 二期规划: 目前官方暂提供的listview未采用item复用逻辑,仅在item不可见时置空,RecyclerView仍是Test控件只支持横向滚动。listview性能仍需提高,下版本规划实现高可用RecyclerView。

4.内存

版本对比: 情侣空间:无内存泄漏及浪费内存情况,比H5版本多约20%。 话题圈:无内存泄漏及浪费内存情况,与H5版本基本持平。 话题圈详细数据:

主要优化点: 1)JS层使Listview控件渲染数据,废弃使用ScrollView控件。 2)视频VideoView拆分,VideoCover交由H5实现,Native对应Fresco管理,MideaPlayer由Native实现。 二期规划: 目前官方暂提供的listview未采用item复用逻辑,仅在item不可见时置空,RecyclerView仍是Test控件只支持横向滚动。listview性能仍需提高,下版本规划实现高可用RecyclerView。

四.ReactNative话题圈与H5话题圈整体数据对比

目前ReactNative在Web与Native通信耗时明显优于webview的jsbridge方式(console.log),在高中端机上如FPS及CPU上表现优于H5,但是从全局来看,目前crash,内存,FPS,首屏等均有优化空间,下面是整体对比数据。

五.写在最后

React Native因你参与会更精彩,希望2016年能将更多的开发者加入React Native阵营,让更多的业务都是 Web的版本节奏,Native的流畅顺滑。

文章来源公众号:QQ空间终端开发团队(qzonemobiledev)

相关推荐

React Native For Android 架构初探

原创声明,本文系作者授权云+社区-专栏发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏听雨堂

MapX5说明

把绘图功能嵌入到用户应用中的最简单、最经济的方法。 MAPINFO MAPX 是强大的ACTIVEX 组件 – 使用标准可视化程序工具可以很容易就整合到商业应...

1745
来自专栏佳爷的后花媛

如何自制条形码扫描器

在文章之前要先感谢我的老师黄小平先生,在制作这个扫描器期间,给了我们很大的帮助和指导. 先说下这个条形码扫描器的预期功能: 如名称所示,主要达到的功能就是实...

693
来自专栏数据小魔方

流量结构分布图——桑基图(Sankey)

桑基图作为相对复杂的图表种类,平时很少用到,不仅仅是因为它的引用场景相对狭窄,另一方面则是制作难度相对较大,门槛较高。 不过针对第一个问题,如果你能很好地理解自...

4405
来自专栏前端架构

移动前端系列——移动页面性能优化.

     随着移动互联网的发展,我们越发要关注移动页面的性能优化,今天跟大家谈谈这方面的事情。

611
来自专栏LET

可视化之AQICN

1125
来自专栏拭心的安卓进阶之路

适配器模式 : 农村小伙娶乌克兰美女语言不通 翻译软件立功

不知道什么时候开始,总听到“ XXX 小伙娶乌克兰美女” 的新闻,比如 农村小伙娶乌克兰美女语言不通 翻译软件立功 等等,我仔细地看了几篇新闻,发现居然不是标...

1976
来自专栏小红豆的数据分析

小蛇学python(8)pandas库之DataFrame

有数据的地方就有表格。无论是异常值处理,清除缺省值,还是增删改查,无论是csv还是mysql等各种数据库,无不是以表格的形式存储数据。表格在数据中成为了一个绕不...

882
来自专栏向治洪

Qzone React Native改造

Android Qzone 6.1版本在情侣空间涉水React Native,以动态插件方式将情侣空间进行React Natived的改造。在情侣空间基础上,A...

1695
来自专栏顶级程序员

为什么Python是入行人工智能的首选语言?

在所有编程语言里,Python并不算萌新,从1991年发布第一个版本,至今已经快30年了。

934
来自专栏大数据挖掘DT机器学习

一个小爬虫:获取Kindle的图书排行榜

本程序抓取在linux和Mac上是没什么问题的,不过windows会遇到编码问题,暂时没有心情来处理这个bug,就是这么任性~ 目标在这里: ? 获取Amazo...

3648

扫码关注云+社区