- Android:
Glide
- React Native:
React-native-fast-image
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ofGIYlVC-1650874408249)(https://user-gold-cdn.xitu.io/2020/7/1/1730870dcac20e0e?imageslim)]
Android — GPU 测试结果不支持 benchmark
Android 测试
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TAp1IvKD-1650874408250)(https://user-gold-cdn.xitu.io/2020/7/1/17308652f37e9711?imageView2/0/w/1280/h/960/ignore-error/1)]
检测结果:
-
- 所有测试均显示出大致相同的FPS。
-
- 与 Flutter 和 React Native 相比,Android 原生使用的内存只有一半。
-
- React Native 需要较重的 CPU 利用,原因是在于目前的 JS 和原生之间的代码需要使用
JSBridge
,这会在序列化和反序列化方面浪费资源。
- React Native 需要较重的 CPU 利用,原因是在于目前的 JS 和原生之间的代码需要使用
-
- 关于电池利用方法,Android 原生最省电,React Native 落后于 Android 和 Flutter,特备是运行连续动画上 React Native 会消耗更多电池电量。
iOS 测试
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wqcLa0mS-1650874408250)(https://user-gold-cdn.xitu.io/2020/7/1/17308656599e3bd3?imageView2/0/w/1280/h/960/ignore-error/1)]
检测结果:
1、在 FPS 上 React Native 的结果比 Flutter 和 Swift 差,原因是无法在 iOS 上使用 IoT 编译。 2、在内存上 Flutter 与原生的内存消耗几乎相同,但在 Flutter 在 CPU 上消耗更重,在此测试中结果中 React Native 远远落后于 Flutte 《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》无偿开源 徽信搜索公众号【编程进阶路】 r 和原生。 3、在测试结果中 Flutter 会利用更多CPU,而 iOS 原生会更多利用 GPU;
测试用例2 — Heavy animations test
如今大多数 Android 和 iOS 都具有强大的硬件,所以在大多数情况下是不会发现 fps 有明显的下降,这就是为什么我们决定增加复杂的动画测试的原因,并且要足够复杂以实现导致 fps 下降。
该测试用力在 Android,iOS,React Native 上使用了 Lottie 进行复杂矢量动画的展示,并在 Flutter 上使用了 Flare 实现相同的动画。
如下图所示,是在 Android 、iOS 和 React Native 上使用 Lottie ,而在 Flutter 上使用的Flare 的实现效果。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x1ANowdF-1650874408251)(https://user-gold-cdn.xitu.io/2020/7/1/173086a921b994a1?imageslim)]
Android
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SnKZA1N0-1650874408251)(https://user-gold-cdn.xitu.io/2020/7/1/173086687995e5d1?imageView2/0/w/1280/h/960/ignore-error/1)]
-
- Android 和 React Native 在性能表现上差不多。很明显这是因为该场景下 Lottie for React Native 只需要使用的原生的绘制逻辑(16–19%CPU,30–29 FPS)。
-
- Flutter的结果让人有些惊讶,因为它的效果有点糟。(12%的CPU和9 FPS)。
而从上述网格动画中删除一个特定的动画后,居然会使 Flutter 上的 FPS 最高提高 40%,所以这里猜测可能是 Flare 对于类似乎任务没有进行优化,或者 Flutter 本身对这种绘制存在兼容问题的原因:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5wgA2MM8-1650874408252)(https://user-gold-cdn.xitu.io/2020/7/1/1730866e744745ed?imageView2/0/w/1280/h/960/ignore-error/1)]
-
- Android 原生需要的内存最少(205 Mb);React Native 需要 280 Mb,Flutter 需要266 Mb。
-
- 应用程序冷启动后,Flutter处于领先地位(2秒),对于 Android 原生和 React Native 大约需要4秒钟。
iOS
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fgtpdva2-1650874408252)(https://user-gold-cdn.xitu.io/2020/7/1/1730867100024b70?imageView2/0/w/1280/h/960/ignore-error/1)]
-
- 不出意料 iOS 和 React Native 在此测试中的结果几乎一致;
-
- Flare 和 Flutter 依旧没有好的表现;
-
- iOS 原生需要的内存量 48 Mb ,React Native 需要 135 Mb,Flutter需要 117 Mb;
-
- 应用程序冷启动后,Flutter处于领先地位(2秒),对于 iOS 原生和 React Native 大约需要 10秒钟;
请注意:在这种情况下我们为 Flutter 使用了一个不同的库,该库比我们在其他平台上使用的库重得多,这可能是fps下降的原因。(因为 Lottie 在 Flutter 上目前的开源效果更差)
用例3 - Even heavier animations test with rotations, scaling and fade.
在此测试中,我们对 200 张图像进行动画运行(旋转和淡入淡出),从而对比不同平台的性能。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-loKVbCVX-1650874408253)(https://user-gold-cdn.xitu.io/2020/7/1/173087880a437d69?imageslim)]
Android
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZGsP1K5S-1650874408253)(https://user-gold-cdn.xitu.io/2020/7/1/17308675f727c5c6?imageView2/0/w/1280/h/960/ignore-error/1)]
-
- 原生平台显示出最佳性能和最有效的内存管理。
-
- Flutter 显示出非常接近元素的 fps,但是内存开销增加了两倍。
-
- React Native 在这种情况下表现不佳。
iOS
tter 显示出非常接近元素的 fps,但是内存开销增加了两倍。
-
- React Native 在这种情况下表现不佳。