文档章节

ReactNative For Android 项目实战总结

偶素浅小浅
 偶素浅小浅
发布于 2016/11/05 14:46
字数 953
阅读 281
收藏 3

版权声明:本文由王少鸣原创文章,转载请注明出处: 
文章原文链接:https://www.qcloud.com/community/article/159

来源:腾云阁 https://www.qcloud.com/community

 

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)

本文转载自:

偶素浅小浅
粉丝 8
博文 202
码字总数 0
作品 0
信阳
私信 提问
加载中

评论(0)

ReactNative教程系列(一、环境的搭建)

目前仅限于windows平台下android开发 大家好,很懒的作者又回来了。这次为大家带来的是ReactNative的教程。很不一般哟~ 因为上个公司要求用这个技术(你大爷的原生不好吗?),好吧,老板说了...

猫儿不吃鱼鱼
2019/03/11
0
0
React Native跨平台移动应用开发框架介绍

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m366917/article/details/61423043 好久没有来更新博客了,给大家说声抱歉,人一旦懒惰起来连自己都害怕。可能...

Aduroidpc
2017/03/11
0
0
Udacity也弃用React Native了 !看看他们使用React Native过程中遇到了哪些问题

Udacity也弃用React Native了 !看看他们使用React Native过程中遇到了哪些问题 2018-07-12 10:29编辑: 枣泥布丁分类:程序人生来源:程序师 React Native弃用Udacity 招聘信息: iOS开发 ...

枣泥布丁
2018/07/12
0
0
仿卖座网(Android+ReactNative)

仿卖座网 仿版的卖座网,整个卖座主要是由页面+页面组成.作者努力正在更新中. 开发环境 如果要进行页面开发很简单,ReactNative,然后 然后启动然后点击首页右上角白色的 与通信 主要通过,更新...

fiveoneLei
2019/08/08
0
0
已有Android项目集成RN

开篇一张图,后面全靠编 1.配置ReactNative的js环境 在Android项目根目录下输入命令npm init (直接在Android studio的terminal命令窗口就行) 我们可以看到init让你生成一个package.json文件,...

pjenary
2018/07/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周四乱弹 —— 像你这么尊重长辈的仓鼠已经不多见了啊

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @巴拉迪维 :分享Tanya Tucker的单曲《I Bet She Knows》 反反复复的单曲循环,让人着迷的沙哑女声,老奶奶的歌实在太治愈了。这不是在听歌,...

小小编辑
45分钟前
16
0
mac中终端和iterm2加上背景图

我的idea一直有萌妹子的背景图,so终端和iterm也来一下~做个记录 终端 iterm2

无极之岚
49分钟前
21
0
基于 Mycat 实现读写分离

之前配置了MySql的主从同步,但是如果我们程序还没实现读写分离。现在可以基于Mycat实现读写分离,Mycat是一个数据库中间件,提供了Mysql分表分库和读写分离等解决方案,下面仅记录Mycat读写分...

爸爸受不了
55分钟前
21
0
根据二维数组中某个字段来排序

1,一种取巧的办法 <?phpfunction sortByField(array $arr, string $field, int $asc = 1) { if (count($arr) <= 1 || empty($field)) {return $arr;}$arr = array_colu......

vinci321
今天
16
0
Linux系统安装RabbitMQ

安装环境 系统:CentOS7,RabbitMQ:3.6.15,Erlang:20.1 RabbitMQ与Erlang对应关系:https://www.rabbitmq.com/which-erlang.html RabbitMQ下载: http://www.rabbitmq.com/releases/rabbi......

那个猩猩很亮
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部