版权声明:本文由王少鸣原创文章,转载请注明出处: 
文章原文链接: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)

ReactNative For Android 项目实战总结的更多相关文章

  1. Android项目实战--手机卫士开发系列教程

    <ignore_js_op> banner131010.jpg (71.4 KB, 下载次数: 0) 下载附件  保存到相册 2 分钟前 上传   Android项目实战--手机卫士01- ...

  2. Android项目实战(二十九):酒店预定日期选择

    先看需求效果图: 几个需求点: 1.显示当月以及下个月的日历 (可自行拓展更多月份) 2.首次点击选择"开始日期",再次点击选择"结束日期" (1).如果&qu ...

  3. Android项目实战(四十九):Andoird 7.0+相机适配

    解决方案类似: Android项目实战(四十):Andoird 7.0+ 安装APK适配 解决方法: 一.在AndroidManifest.xml 文件中添加 四大组件之一的 <provider ...

  4. Android项目实战(三十二):圆角对话框Dialog

    前言: 项目中多处用到对话框,用系统对话框太难看,就自己写一个自定义对话框. 对话框包括:1.圆角 2.app图标 , 提示文本,关闭对话框的"确定"按钮 难点:1.对话框边框圆角 ...

  5. (转载)Android项目实战(三十二):圆角对话框Dialog

    Android项目实战(三十二):圆角对话框Dialog   前言: 项目中多处用到对话框,用系统对话框太难看,就自己写一个自定义对话框. 对话框包括:1.圆角 2.app图标 , 提示文本,关闭对话 ...

  6. (转载)Android项目实战(二十七):数据交互(信息编辑)填写总结

    Android项目实战(二十七):数据交互(信息编辑)填写总结   前言: 项目中必定用到的数据填写需求.比如修改用户名的文字编辑对话框,修改生日的日期选择对话框等等.现总结一下,方便以后使用. 注: ...

  7. (转载)Android项目实战(二十八):Zxing二维码实现及优化

    Android项目实战(二十八):Zxing二维码实现及优化   前言: 多年之前接触过zxing实现二维码,没想到今日项目中再此使用竟然使用的还是zxing,百度之,竟是如此牛的玩意. 当然,项目中 ...

  8. (转载)Android项目实战(十七):QQ空间实现(二)—— 分享功能 / 弹出PopupWindow

    Android项目实战(十七):QQ空间实现(二)—— 分享功能 / 弹出PopupWindow   这是一张QQ空间说说详情的截图. 分析: 1.点击右上角三个点的图标,在界面底部弹出一个区域,这个 ...

  9. (转载)Android项目实战(二十八):使用Zxing实现二维码及优化实例

    Android项目实战(二十八):使用Zxing实现二维码及优化实例 作者:听着music睡 字体:[增加 减小] 类型:转载 时间:2016-11-21我要评论 这篇文章主要介绍了Android项目 ...

随机推荐

  1. Android—— Intent参数this问题

    Android Intent参数this问题 (2013-04-02 11:19:48) 转载▼ 标签: android intent 分类: Android 转自:http://blog.csdn. ...

  2. 应用层timer_libc_posix timer

    应用层除了通过setitimer/getitimer设置获取timer外,还可通过timer_create()等一系列函数实现应用层timer功能. 应用流程 The timers created b ...

  3. Juint测试

    添加"Juint测试"组件: 之后不用写在main方法里面便可以直接测试:

  4. 【转】优秀PMP项目经理必备的8个要素

    结合本人这几年在项目管理上的总结和得失,本人认为优秀的项目经理要有 责任心.要 善于沟通.能 引导客户.能 预测风险. 善于总结. 随需应变.善于 激励团队.同时也要 懂技术. 责任心 作为项目经理首 ...

  5. ADT下载地址(含各版本)

      2015/05/07 新增 ADT-23.0.6.zip2015/01/18 新增(未测试,不知下载过程中是否有问题,请网友自行测试,最好能把测试结果告知,谢谢)ADT-23.0.3.zipADT ...

  6. thikphp 简单的接口骨架

    //get id 获取内容,调用xml方法 public function get(){ $id = $_GET['id'];//接收id $User = M('user'); //$val-> ...

  7. java_Observer Design Pattern

    摘自: http://www.ntu.edu.sg/home/ehchua/programming/java/J4a_GUI.html Creating Your Own Event, Source ...

  8. css -- 通俗理解inline、block、inline-block

    display:inline; 内联元素,简单来说就是在同一行显示. display:block; 块级元素,简单来说就是就是有换行,会换到第二行. display:inline-block; 就是在 ...

  9. 【Java面试题】31 介绍Collection框架的结构

    Collection:List列表,Set集 Map:Hashtable,HashMap,TreeMap   Collection  是单列集合 List   元素是有序的.可重复 有序的 colle ...

  10. php对gzip的使用(实例)

    代码如下: if (!function_exists('gzdecode')) { function gzdecode ($data) { $flags = ord(substr($data, 3, ...