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 条评论
登录 后参与评论

相关文章

来自专栏walterlv - 吕毅的博客

在 Windows 10 上为 WPF 窗口添加模糊特效(就像开始菜单和操作中心那样)

发布于 2017-10-01 16:14 更新于 2018-02...

1172
来自专栏pangguoming

MySQL集群的几种方案

组建MySQL集群的几种方案 LVS+Keepalived+MySQL(有脑裂问题?但似乎很多人推荐这个) DRBD+Heartbeat+MySQL(有一台机器...

3145
来自专栏FreeBuf

暗链隐藏的N种姿势

一、介绍 暗链也称黑链,即隐蔽链接,是黑帽SEO的作弊手法之一,其目的就是利用高权重网站外链来提升自身站点排名。 一般来说,暗链是由攻击者入侵网站后植...

1785
来自专栏生信技能树

最新的肿瘤突变查找神器lancet试用体验

名字跟大名鼎鼎的柳叶刀期刊撞车,软件主页在:https://github.com/nygenome/lancet

170
来自专栏MixLab科技+设计实验室

App之应用图标标记

以下为正文: ? 1、概念 应用图标标记,称为Badge App Icon。 Badge,徽章,具象来说, 就是佩带在身上用来表示身份、职业的标志。 它有着悠久...

4797
来自专栏前端新视界

如何编写轻量级 CSS 框架

Github: https://github.com/nzbin/snack Docs:  https://nzbin.github.io/snack 前言...

22210
来自专栏小文博客

腾讯云学生机自动抢代金券脚本——自动抢代金券

3026
来自专栏微信公众号:Java团长

对高并发流量控制的一点思考

在实际项目中,曾经遭遇过线上5W+QPS的峰值,也在压测状态下经历过10W+QPS的大流量请求,本篇博客的话题主要就是自己对高并发流量控制的一点思考。

691
来自专栏知晓程序

开发 | 谁说 LBS 小程序开发难?前端女王大人手把手教会你

利用它,你可以在小程序中调用一个功能完整的地图,让小程序里所展示的地点更直观、更精确。

712
来自专栏视频云

腾讯云直播答题方案解析

基于腾讯云业界领先的视频云技术,提供一站式在线知识竞技接入方案,并独家提供微信小程序接入方案。

5.8K9

扫码关注云+社区