ReactNative性能优化的方法是什么

这篇“ReactNative性能优化的方法是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“ReactNative性能优化的方法是什么”文章吧。

创新互联成立以来不断整合自身及行业资源、不断突破观念以使企业策略得到完善和成熟,建立了一套“以技术为基点,以客户需求中心、市场为导向”的快速反应体系。对公司的主营项目,如中高端企业网站企划 / 设计、行业 / 企业门户设计推广、行业门户平台运营、成都app软件开发手机网站制作设计、微信网站制作、软件开发、托管服务器等实行标准化操作,让客户可以直观的预知到从创新互联可以获得的服务效果。

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,首屏等均有优化空间,下面是整体对比数据。

以上就是关于“ReactNative性能优化的方法是什么”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。


网站题目:ReactNative性能优化的方法是什么
网页路径:http://csdahua.cn/article/ijsecd.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流