ReactNative性能优化的方法是什么

共计 1443 个字符，预计需要花费 4 分钟才能阅读完成。

这篇“ReactNative 性能优化的方法是什么”文章的知识点大部分人都不太理解，所以丸趣 TV 小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“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，首屏等均有优化空间，下面是整体对比数据。

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