code前端网mpx框架作者：小程序框架运行时性能评测
随着小程序在商务生活中的巨大成功，小程序开发在国内前端领域受到越来越多的关注。为了方便广大开发者更好的开发Widget，各种小Widget也层出不穷，呈现出百花齐放的局面。但目前业界还没有一份全面、详细、客观、公正的小程序框架评测报告，为小程序开发者选择技术时提供参考。所以我打算推出一系列文章，对业界流行的小软件框架进行全面、客观、公正的评价。本文是该系列的第一篇文章——运行时性能。
本文中，我们将对以下框架进行运行时性能测试（排名不分先后）：
- wepy2(https://github.com/Tencent/wepy) @2.0.0-alpha.20
- uniapp (https://github.com/dcloudio/u... @2.0.0-26120200226001
- mpx(https://github.com/didi/mpx) @2.5.3eon( https:// github.com /didi/chame... @1.0.5
- mpvue(https://github.com/Meituan-Di... @2.0.6
- kbone(https://github.com/腾讯/kb ... @0.8.3
- taro next(https://github.com/NervJS/taro) @3.0.0-alpha.5
其中kbone和taro next都使用vue作为业务框架进行测试，人工更新时间当
框架性能测试demo全部存放在https://github.com/hiyuki/mp-....开发者欢迎验证并修复错误
测试计划
为了让测试结果真实有效，我根据常见的业务场景构建了两个测试场景，即动态测试场景和静态测试场景。
动态测试场景
动态测试中，基于静态节点较少的数据动态渲染视图。视图更新比较耗时，setData调用条件是本次测试场景中的主要测试点。
动态测试demo模拟了实际业务中常见的长列表+多tab场景。该demo中有两种优惠券列表数据，一种是可用优惠券数据，另一种是不可用优惠券数据，同时视图中只会渲染并显示其中一种数据。您可以模拟对列表数据的各种操作，并在上部控制区域中查看显示变化（剪切选项卡）。
动态测试demo
在动态测试中，我在初始化之前通过函数代理对外代理了app、页面和组件构造器，并在Page的onLoad中使用mixin以及Component Inject setData拦截逻辑创建的hook来监听setData对所有页面和组件的调用，统计小程序的视图刷新时间和setData调用状态。该测试方法可以实现对框架代码的零侵入，可以追踪小程序的整个setData行为，并进行独立的耗时计算，具有很强的通用性。代码具体实现可以看https://github.com/hiyuki/mp-...
静态测试场景
静态测试模拟公司内静态页面的场景，比如页面业务活动和文章。页面有大量静态节点，没有数据的动态渲染。最初准备所需的时间是此场景中测试的重点。
静态测试演示使用我去年发表的一篇技术文章中的HTML代码来定制和构建一个包含大量静态节点和文本内容的小程序。
静态测试演示
测试流程及数据
以下所有测试耗时数据均按微信小程序中真机5次测试的平均值计算，单位为ms。 Ios测试环境为手机型号iPhone 11，系统版本13.3.1，微信版本7.0.12。 Android测试环境为手机型号小米9，系统版本Android10，微信版本7.0.12。
为了让数据显示不要过于混乱和复杂，文章中的数据主要是Ios测试结果。 Android测试结果与Ios匹配。总耗时比Ios大约高3~4倍。所有原始测试数据均存储在https://github.com/hiyuki/mp-...
由于transform-runtime引入的core-js会对框架运行时量和运行时间产生一定的影响，并不是所有框架都Transform -编译期间将打开运行时。为了调整测试环境，在关闭转换运行时时执行以下测试。
框架运行时体积
由于不是所有框架都可以使用webpack-bundle-analyzer得到准确的包写入减去各个项目框架占用的体积，这里体积作为框架的运行时体积。
| 演示总大小 (KB) | 框架运行时大小 (KB) | |
|---|---|---|
| 原生 | 27 | 0 |
| wepy2 | 66 | 39 |
| unimpxeone | 136 | 109 |
| mpvue | 103 | 76 |
| kbone | 395 | 368 |
| 芋头接下来 | 183 | 156 |
本篇的结论测试是：
native > wepy2 > mpx > mpvue > uniapp > chameleon > taro next > kbone
结论分析：我们将frame和mp2的运行时间控制得最好；
页面渲染时间（动态测试）
我们使用 来更新页面 操作以触发页面重新加载。对于大多数框架来说，从触发更新操作到页面执行onReady的页面渲染时间是比较耗时的，但是对于像kbone、taro next这样的动态渲染框架，在页面上执行onReady并不意味着视图真正被渲染了。为此，我们设置了一个特殊的规则，即在页面 onReady 被触发后的 1000 毫秒内，不会有任何异常。当操作过程中发生setData回调时，最后一次触发的setData回调将作为页面渲染完成时间来计算实际的页面渲染时间。测试结果如下：
| 页面渲染时间 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| native | 60.8 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| wepy2 | 64 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| uniapp4 mpx | 52.6 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 变色龙 | 56.4 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| mpvue | 117.8 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| kb一98.6 | 98.6 | 56.4mpvue | 117.8 时间此测试所花费的时间与真实渲染时间并不对应。由于小程序本身不提供性能API，因此无法通过js准确测试真实的渲染时间。不过，从得到的数据来看，这个数据还是有一定参考意义的。 本次测试的结论是： 页面刷新耗时（无后台数据）这里后台数据的定义是数据中存在但当前页面渲染中没有用到的数据。在这个演示场景中，它是不可用优惠券的数据。目前会的。当不可用优惠券数量为0时，对可用优惠券列表执行各种操作并计算更新时间。 更新时间是从数据操作事件触发到对应的setData回调完成之间计算的 mpvue使用当前时间戳（new Date）作为超时基准，设置setData超时为50ms 。油门操作，这种方法存在严重问题。当Vue中单个渲染同步过程的执行时间超过50ms时，后续组件patch触发的setData就会突破这个限制边界，以每次50ms的频率执行高频setData。无效调用。在本次性能测试demo中，当优惠券数量超过500张时，界面完全卡住。为了整个测试过程顺利运行，我对问题进行了简单的修复，并使用setTimeout重写了节流部分，以确保vue单渲染过程同步完成后调用setData发送合并的数据。然后就是mpvue的全部表现。测试都是基于这个补丁版本，补丁存放在https://github.com/hiyuki/mp-... 理论上，在优化的假设下，native的性能应该是所有框架中最好的上限，但是在日常业务开发中我们可能无法对每一个setData进行优化。以下性能测试中的所有嵌入数据都是通过修改数据并完整发送来实现的。 对于第一个测试，我们使用 | 5 105.4 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| wepy2 | 118.4 | 168.6 | 204. | 288.6 | 347.8 | 389.2 | 434.2 | 496 | 539 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| uni.298.2 99.6 | 104 | 102.4mpx | 110.4 | 87.2 | 82.2 | 83 | 80.6
然后我们点击
| 183 | 156 |
，
， , 计数创建后台数据
| back add(1000) | |
|---|---|
| native | 45.2 |
| wepy2 | 174.6 8 9.4 |
| mpx | 142.6 |
| mpvue | 134 |
| Kbone | 0 |
| taro next | 0 |
mpx 受到 vue 的启发，通过优化 setData 来实现。它使用编译时生成的渲染函数来跟踪模板数据依赖性。 SetData在后台数据发生变化时不会被调用，而kbone和taro next则使用dynamic。渲染技术模拟底层Web环境，完全在顶层运行Vue框架，达到同样的效果。
然后我们在没有后台数据的情况下执行与上面相同的操作进行耗时统计，首先递增100：
| 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| native | 88 | 69.8 | 78 | 51 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 71.2 | 3514 | 1124 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 79 ,4 84.4 | 89.8 | 93.2 | 99.6 | 108 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| wepy2 | 121 | 173.43♾173.4❝345 .6 434.8 | 535.6 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| uniapp❀ 135.4 112.4 | 110.6 | 106.4 | 109.6 | 3514 | 1124 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 114.4 | 116 | 118。 8 | 117.4 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| mpx | 112.6 | 86.2 | 84.684.687 .291.2 | 91.292.4 echamel 178.4 | 178.2 | 186.4 | 184.6 | 192192。 217.6 | 232.6 | 236.8 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| mpvue | 139 | 151 | 173.4。 258.8 | 303.4 | 340.4 | 384.6 | 429.455 9.8 | 746.60980.6126.8 | 1450.6 | 1705.4♾❙1705.4。 | 2367.8 | 2617 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 太郎 下一个 | 482.6 | 626.2 | 755 | 909.621568.6 | 1740.6 | 1883.8然后按照表格中的操作顺序一一点击统计
的本次测试结论为： 页面更新耗时（大数据量场景）由于 mpvue 和 taro next 的渲染都是在页面上完成的，而且 kbone 的渲染方案会添加大量额外的自定义组件，所以这三个框架将be 当优惠券数量达到2000张时，崩溃白屏。我们排除这三个框架，对剩下的框架进行大数据量场景下耗时的页面刷新测试 首先在没有后台数据的场景下使用 本次测试的结论是： 结论分析： 当可用优惠券数量为 1000 时，我们点击任意可用优惠券即可触发模式测试本地更新性能 对于：❈nnnn❝变色龙 ≈ wepy2 ≈ uniapp > mpvue > taro next > kbone 结论分析： 我们将 操作流程如下： 操作完成后，我们使用 ❀ 和 getCounter getSize
本篇的结论测试为： 结论分析：❀mp实现了数据的最优框架； 页面渲染时间（静态测试）这里的页面渲染时间与前面介绍的动态测试场景相同。测试结果如下：
|
版权声明
本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。