此项目是一个用于测试各家跨端开发框架 App 各项 benchmark 数据指标的一个示例工程集合，包括了基于五种不同的跨端开发框架开发的示例 APP 工程项目（Native、Hummer、Tenon、ReactNative 和 Flutter），每个项目都包含了 Android 和 iOS 两端，并分别对以下两大方面做了对比基准测试：
我们分别对基于五种不同的跨端开发框架开发的示例 APP 工程项目（Native、Hummer、Tenon、ReactNative 和 Flutter），在单架构模式下（Android: armeabi-v7a、iOS: arm64），编译生成的 Release 包做了包大小的对比测试，以下是具体测试版本和测试结果。
测试版本
- Hummer(Android): 'com.didi.hummer:hummer:0.3.18'
- Hummer(iOS): 0.2.3
- ReactNative: 'com.facebook.react:react-native:0.63.4'
- Weex: 'com.taobao.android:weex_sdk:0.26.0'
- Flutter: 1.22.6
测试代码
/package_size
测试结果
| 平台 | Native | Hummer | ReactNative | Weex | Flutter |
|---|
| Android | 2.5M | 4.2M | 8.5M | 6.9M | 5.2M |
| iOS | 0.097M | 0.697M | 1.2M | 0.997M | 5.9M |
我们分别对基于五种不同的跨端开发框架开发的示例 APP 工程项目（Native、Hummer、Tenon、ReactNative 和 Flutter），针对四种不同的测试用例（见下面用例介绍），对四组不同维度的性能指标（首屏渲染时间、CPU、内存和帧率），分别做了各自的 benchmark 性能测试，并且保存了相关测试数据。
用例介绍
- 用例1： 列表基准测试（Scroller）。列表中500行视图，每一行视图中包含5个子视图，测试快速滚动整个列表时的性能。
- 用例2： 列表视图基准测试（List）。列表中1000行视图，每一行视图中包含5个子视图，测试快速滚动整个列表时的性能。
- 用例3： 动画基准测试。500个视图，每个视图分别做5种动画中的其中1种，测试所有动画同时执行时的性能。
- 用例4： 拖拽基准测试。测试在屏幕范围内拖拽一个视图时的性能。
测试机型
- 系统： Android 10
- 型号： vivo X27 Pro - V1836A
- vivo ROM： Funtouch OS_10 PD1836_A_6.20.1
测试版本
- Hummer(Android): 'com.didi.hummer:hummer:0.3.18'
- Hummer(iOS): 0.2.3
- Tenon: 1.2.1
- Weex: 'com.taobao.android:weex_sdk:0.26.0'
- ReactNative: 'com.facebook.react:react-native:0.63.4'
- Flutter: 1.22.6
用例代码
/performance
用例页面
下面是以 Native 用例为例做的页面截图，其他 App 开发框架的用例运行页面效果均与 Native 用例相同。
测试结果
无论是 Android 端还是 iOS 端，Hummer 和 Tenon 的整体表现，基本都很接近原生性能。
| 用例1 (Scroller) | Native | Hummer | Tenon | ReactNative | Weex | Flutter |
|---|
| 页面渲染时间(首次, ms) | 741 | 1835 | 2617 | 1664 | 2834 | 862 |
| 页面渲染时间(非首次, ms) | 590 | 1560 | 2182 | 1508 | 2579 | 568 |
| CPU(%) | 7.53 | 10.72 | 10.69 | 11.7 | 10.11 | 9.94 |
| 内存(M) | 114.89 | 133.45 | 137.94 | 167.8 | 178.5 | 210.17 |
| 帧率(fps) | 58 | 50 | 51 | 47 | 49 | 31 |
| 用例2 (List) | Native | Hummer | Tenon | ReactNative | Weex | Flutter |
|---|
| 页面渲染时间(首次, ms) | 334 | 387 | 559 | 545 | 3477 | 535 |
| 页面渲染时间(非首次, ms) | 170 | 215 | 335 | 368 | 3238 | 215 |
| CPU(%) | 4.07 | 4.85 | 6.85 | 14.43 | 5.08 | 10.44 |
| 内存(M) | 58.14 | 64.62 | 70.48 | 173.89 | 224.08 | 152.38 |
| 帧率(fps) | 60 | 60 | 60 | 58 | 60 | 59 |
| 用例3 (动画) | Native | Hummer | Tenon | ReactNative | Weex | Flutter |
|---|
| 页面渲染时间(首次, ms) | 345 | 641 | 1044 | 778 | 1881 | 538 |
| 页面渲染时间(非首次, ms) | 195 | 385 | 730 | 636 | 1394 | 224 |
| CPU(%) | 14.27 | 15.48 | 15.3 | 33.31 | 17.22 | 18.58 |
| 内存(M) | 86.9 | 88.97 | 102.53 | 118.75 | 102.56 | 172.28 |
| 帧率(fps) | 30 | 30 | 30 | 31 | 29 | 30 |
| 用例4 (拖拽) | Native | Hummer | Tenon | ReactNative | Weex | Flutter |
|---|
| 页面渲染时间(首次, ms) | 253 | 310 | 342 | 425 | 396 | 514 |
| 页面渲染时间(非首次, ms) | 168 | 175 | 183 | 287 | 185 | 213 |
| CPU(%) | 3.03 | 5.19 | 6 | 7.51 | 5.96 | 6.94 |
| 内存(M) | 55.55 | 63.16 | 66.5 | 102.17 | 66.57 | 142.21 |
| 帧率(fps) | 60 | 60 | 59 | 60 | 60 | 60 |
| 用例1 (Scroller) | Native | Hummer | Tenon | ReactNative | Weex | Flutter |
|---|
| 页面渲染时间(ms) | 1727 | 1970 | 2249 | 2358 | 1694 | 806 |
| CPU(%) | 1.73 | 2 | 2 | 5.45 | 3.18 | 8.18 |
| 内存(M) | 116 | 149 | 156.27 | 177.27 | 144 | 125.18 |
| 卡顿率(ms/s) | 1.667 | 1.667 | 1.668 | 1.678 | 1.668 | 0 |
| 用例2 (List) | Native | Hummer | Tenon | ReactNative | Weex | Flutter |
|---|
| 页面渲染时间(ms) | 469 | 545 | 684 | 975 | 4141 | 608 |
| CPU(%) | 3.36 | 5.64 | 5.82 | 18.45 | 9.91 | 8.27 |
| 内存(M) | 9.36 | 21.18 | 23.55 | 88.36 | 91.55 | 91.82 |
| 卡顿率(ms/s) | 0 | 0 | 4.16 | 7.59 | 3.419 | 2.902 |
| 用例3 (动画) | Native | Hummer | Tenon | ReactNative | Weex | Flutter |
|---|
| 页面渲染时间(ms) | 773 | 905 | 1131 | 1353 | 1535 | 655 |
| CPU(%) | 1.55 | 2 | 1.91 | 30.55 | 6.73 | 8.45 |
| 内存(M) | 6 | 13 | 17.27 | 26 | 56.73 | 81.73 |
| 卡顿率(ms/s) | 0 | 0 | 0 | 0 | 0 | 0 |
| 用例4 (拖拽) | Native | Hummer | Tenon | ReactNative | Weex | Flutter |
|---|
| 页面渲染时间(ms) | 539 | 563 | 578 | 922 | 545 | 708 |
| CPU(%) | 2 | 5.55 | 6.18 | 7.55 | 7.18 | 5 |
| 内存(M) | 5 | 10 | 12 | 14 | 16 | 54 |
| 卡顿率(ms/s) | 0 | 0 | 0 | 0 | 0 | 0 |
