文档章节

ReactNative For Android 项目实战总结

偶素浅小浅
 偶素浅小浅
发布于 2016/11/05 14:46
字数 953
阅读 26
收藏 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)

本文转载自:

共有 人打赏支持
偶素浅小浅
粉丝 6
博文 202
码字总数 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开发 ...

枣泥布丁
07/12
0
0
已有Android项目集成RN

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

pjenary
07/19
0
0
JavaScript(React Native、Node.js等)移动、服务端通吃的全栈语言

作者:李宁老师 东北大学计算机专业硕士。曾任沈阳东软股份项目经理。51CTO学院签约讲师。从事软件研究和开发超过20年。长久以来一直从事Java、Android、iOS、C++、Swift、Objective-C以及跨...

androidguy
06/29
0
0
React Native 调试问题

使用React Native Tool在VSCODE中进行断点调试时点击DEBUG Android,弹出 Could not debug. Unknown error: not all success patterns were matched. It means that "react-native run-andro......

bill1987610
05/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Windows 下双 Python 开发环境配置

Windows 下双 Python 开发环境配置作者:老农民(刘启华)QQ: 46715422Email: 46715422@qq.com微信: 46715422 本人曾经在 Windows 下被两个版本环境折腾够呛,现在总结两个 Python...

新疆老农民
昨天
2
0
CentOS7全局安装composer

1. 下载composer-setup.php到当前目录 php -r "copy('https://install.phpcomposer.com/installer', 'composer-setup.php');" 2. 安装 php composer-setup.php 3. 将composer设置成全局 mv c......

月夜中徘徊
昨天
2
0
20180920上课截图

小丑鱼00
昨天
1
0
基于TCP的远程服务调用

前言 上篇,分析了基于HTTP方式的RPC调用。本篇将在上篇的基础上,分析基于TCP方式的RPC调用。代码的整体思路是一致的,可以看作是在上篇功能上的扩展——即通信的方式。 代码:https://git...

MarvelCode
昨天
2
0
67:shell脚本介绍 | shell脚本结构 | 执行data命令用法 | shell脚本中变量

1、shell脚本介绍: shell是一种脚本语言和传统的开发语言相比,会比较简单: shell有自己语法,可以支持逻辑判断、循环等语法: 可以自定义函数,目的是减少重复的代码: shell是系统命令的集合...

芬野de博客
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部