Skip to content

Latest commit

 

History

History
213 lines (146 loc) · 13.6 KB

README.md

File metadata and controls

213 lines (146 loc) · 13.6 KB

这是为《小程序跨端框架全面测评》准备的仓库。

本项目分别使用微信原生版、wepy版、mpvue版、taro版、uni-app版、chalemeon版,各自开发一个仿微博小程序首页的复杂长列表,支持下拉刷新、上拉翻页、点赞功能。

该项目主要用于两项测试:

  • 跨端支持度如何:是否真能实现各框架宣传的那样,一次开发、多端发布?真的不需要二次开发?
  • 跨端框架性能如何:跨端框架基本都是compiler + runtime模式,引入的runtime是否会降低运行性能?尤其是与原生微信小程序开发相比性能怎么样?

大家可自助测试,启动测试请修改 utils --> config.js 下各项配置:

  • PERF_MAX 总翻页次数
  • PERF_LIKE_MAX 总点赞次数
  • PERF_AUTO 是否开启自动测试
  • PERF_USING_COMPONENTS 是否为原生组件,mpvuewepyfalse, 其他均为 true,请勿手动修改

Tips:

  • kone 修改的配置跟其他平台有些区别,项目编译之后到微信开发者工具找到 common --> utils --> perf.common.js 文件,修改文件 97行PERF_MAX 等变量,与上述描述一致,开始自动测试。

  • 因为 kone 翻页到 33 页会导致节点超出,脚本无法继续进行,为了方便查看日志,在 common --> utils --> perf.common.js 文件搜索 showToast, 大概 187 行,注释掉 showToast 弹窗提示的实现 ,并在手机端开启调试模式,查看报错日志。

测试结果@20200409

参考:跨端开发框架深度横评之2020版

测试结果@20190327

1. 跨端支持度如何

开发一次,到处运行,是每个程序员的梦想。但现实往往变成开发一次,到处调错。

各个待评测框架,是否真得如宣传的那样,一次开发、多端发布?

我们将上述仿微博App依次发布到各平台,验证每个框架在各端的兼容性,结果如下:

平台 微信原生 wepy mpvue taro uni-app chameleon
微信小程序 ⭕️ ⭕️ ⭕️ ⭕️ ⭕️ ⭕️
支付宝小程序 ⭕️ ⭕️ ⭕️
百度小程序 ⭕️ ⭕️ ⭕️
头条小程序 ⭕️ ⭕️ ⭕️
H5端 上拉加载/下拉刷新失效 ⭕️ 上拉加载/下拉刷新失效
App端 上拉加载失效 ⭕️ 列表无法滚动,无法测试上拉加载/下拉刷新

测试结果说明:

  • ⭕ 表示支持且功能正常,❌ 表示不支持,其它则表示支持但存在部分bug或兼容问题
  • wepy 2.0 宣称版已支持其他家小程序,本测试基于wepy官网指引安装的wepy-cli默认版本为1.7.3,尚不支持多端
  • chameleon尝鲜版宣称支付宝、百度小程序,本测试基于chameleon官网指引安装的chameleon-tool默认版本为0.1.1,尚不支持其它小程序

通过这个简单的例子可以看出,跨端支持度测评结论:uni-app > taro > chameleon > mpvue >wepy原生微信小程序

但是仅有上面的测试还不全面,实际业务要比这个测试例复杂很多。但我们没法开发很多复杂业务做评测,所以还需要再对照各家文档补充一些信息。 由于每个框架的文档中都描述了各种组件和API的跨端支持程度。我们过了几家的文档,发现各家基本是以微信小程序为基线,然后把各种组件和API在其他端实现了一遍:

  • taro:H5端实现了大部分微信的API,App端和微信的差异比较大。
  • uni-app:组件、API、配置,大部分在各个端均已实现,个别API有说明在某些端不支持。可以看出uni-app是完整在H5端实现了一套微信模拟器,在App端实现了一套微信小程序引擎,才达到比较完善的平台兼容性。
  • chameleon:非常常用的一些组件和API在各端已经实现,这部分的平台差异较少。但大量组件和API需要开发者自己分平台写代码。

跨端框架,一方面要考虑框架提供的通用api跨端支持,同时还要考虑不同端的特色差异如何兼容。毕竟每个端都会有自己的特色,不可能完全一致。

  • taro:提供了js环境变量判断和统一接口的多端文件,可以在组件、js、文件方面扩展多端,不支持其他环节的分平台处理。
  • uni-app:提供了条件编译模型,所有代码包括组件、js、css、配置json、文件、目录,均支持条件编译,可不受限的编写各端差异代码。
  • chameleon:提供了多态方案,可以在组件、js、文件方面扩展多端,不支持其他方式的分平台处理。

跨端框架,还涉及一个ui框架的跨端问题,评测结果如下:

  • taro:官方提供了taro ui,支持小程序(微信/支付宝/百度)、H5平台,不支持App,详见
  • uni-app:官方提供了uni ui,可全端运行;uni-app还有一个插件市场,里面有很多三方ui组件,详见
  • chameleon:官方提供了cml-ui扩展组件库,可全端运行,但组件数量略少,详见

最后补充跨端案例:

  • mpvue:微信端案例丰富,未见其它端案例
  • taro:微信端案例丰富,百度、支付宝、H5端亦有少量案例
  • uni-app:微信、App、H5三端案例丰富,官方示例已发布到6端
  • chameleon:未看到任何端案例

综合以上信息,本项的最终评测结论:uni-app > taro > chameleon > mpvue > wepy原生微信小程序

之前曾有友商掀起一番真跨端和伪跨端之争,通过本次Demo实测,这个争论可以盖棺定论了。

2. 跨端框架性能如何

跨端框架基本都是compiler + runtime模式,引入的runtime是否会降低运行性能?

尤其是与原生微信小程序开发相比性能怎么样,这是大家普遍关心的问题。

我们依然以上述仿微博小程序为例,测试2个容易出性能问题的点:长列表加载、大量点赞组件的响应。

2.1 长列表加载

仿微博的列表是一个包含很多组件的列表,这种复杂列表对性能的压力更大,很适合做性能测试。

从触发上拉加载到数据更新、页面渲染完成,需要准确计时。人眼视觉计时肯定不行,我们采用程序埋点的方式,制定了如下计时时机:

  • 计时开始时机:交互事件触发,框架赋值之前,如:上拉加载(onReachBottom)函数开头
  • 计时结束时机:页面渲染完毕(微信setData回调函数开头)

Tips:setData回调函数开头可认为是页面渲染完成的时间,是因为微信setData定义如下(微信规范):

字段 类型 必填 描述
data Object 这次要改变的数据
callback Function setData引起的界面更新渲染完毕后的回调函数

测试方式:从页面空列表开始,通过程序自动触发上拉加载,每次新增20条列表,记录单次耗时;固定间隔连续触发 N 次上拉加载,使得页面达到 20*N 条列表,计算这 N 次触发上拉 -> 渲染完成的平均耗时。

测试结果如下:

列表条数 微信原生 wepy mpvue taro uni-app chameleon
200 770 625 969 752 641 1261
400 876 781 4493 974 741 1970
600 1111 - - 1250 910 2917
800 1406 - - 1547 1113 4040
1000 1690 - - 1878 1321 5196

说明:以400条微博列表为例,从页面空列表开始,每隔1秒触发一次上拉加载(新增20条微博),记录单次耗时,触发20次后停止(页面达到400条微博),计算这20次的平均耗时,结果微信原生在这20次 触发上拉 -> 渲染完成 的平均耗时为876毫秒,最快的uni-app是741毫秒,最慢的mpvue是4493毫秒

大家初看这个数据,可能比较疑惑,别急,下方有详细说明

说明1:为何 mpvue/wepy 测试数据不完整?

mpvuewepy 诞生之初,微信小程序尚不支持自定义组件,无法进行组件化开发;mpvuewepy 为解决这个问题,将用户编写的Vue组件,编译为WXML中的模板(template),变相实现了组件化开发能力,提高代码复用性,这在当时的技术条件下是很棒的技术方案。

但如此方案,在复杂组件较多的页面,会大量增加 dom 节点,甚至超出微信的 dom 节点数限制。我们在 红米手机(Redmi 6 Pro)上实测,页面组件超过500个时,mpvuewepy 实现的仿微博App就会报出如下异常,并停止渲染,故这两个测试框架在组件较多时,测试数据不完整。这也就意味着,当页面组件太多时,无法使用这2个框架。

dom limit exceeded please check if there's any mistake you've made

Tips:wepy在400条列表以内,为何性能高于微信原生框架,这个跟自定义组件管理开销及业务场景有关(wepy编译为模板,不涉及组件创建及管理开销),后续对微博点赞,涉及组件数据传递时,微信原生框架的性能优势就提现出来了,详见下方测试数据。

说明2:uni-app 比微信原生框架性能更好?逆天了?

其实,在页面上有200条记录(200个组件)时,taro 性能数据也比微信原生框架更好。

微信原生框架耗时主要在setData调用上,开发者若不单独优化,则每次都会传递大量数据;而 uni-apptaro 都在调用setData之前自动做diff计算,每次仅传递有变化的数据。

例如当前页面有20条数据,触发上拉加载时,会新加载20条数据,此时原生框架通过如下代码测试时,setData会传输40条数据

data: {
    listData: []
},
onReachBottom() { //上拉加载
    let listData = this.data.listData;
    listData.push(...Api.getNews());//新增数据
    this.setData({
        listData
    }) //全量数据,发送数据到视图层
}

开发者使用微信原生框架,完全可以自己优化,精简传递数据,比如修改如下:

data: {
    listData: []
},
onReachBottom() { //上拉加载
    // 通过长度获取下一次渲染的索引
    let index = this.data.listData.length;
    let newData = {}; //新变更数据
    Api.getNews().forEach((item) => {
        newData['listData[' + (index++) + ']'] = item //赋值,索引递增
    }) 
    this.setData(newData) //增量数据,发送数据到视图层
}

经过如上优化修改后,再次测试,微信原生框架性能数据如下:

|组件数量 | 微信原生框架(优化前) |微信原生框架(优化后) |uni-app|taro | |:- |:- |:- |:- | |200 |770 |572 |641 | 752 | |400 |876 |688 |741 | 974 | |600 |1111 |855 |910 | 1250 | |800 |1406 |1055 |1113 | 1547 | |1000 |1690 |1260 |1321 | 1878 |

从测试结果可看出,经过开发者手动优化,微信原生框架可达到更好的性能,但 uni-apptaro 相比微信原生,性能差距并不大。

这个结果,和web开发类似,web开发也有原生js开发、vue、react框架等情况。如果不做特殊优化,原生js写的网页,性能经常还不如vue、react框架的性能。

也恰恰是因为Vuereact框架的优秀,性能好,开发体验好,所以原生js开发已经逐渐减少使用了。

复杂长列表加载下一页评测结论:微信原生开发手工优化,uni-app>微信原生开发未手工优化,taro > chameleon > wepy > mpvue

2.2 点赞组件响应速度

长列表中的某个组件,比如点赞组件,点击时是否能及时的修改未赞和已赞状态?是这项测试的评测点。

测试方式:

  • 选中某微博,点击“点赞”按钮,实现点赞状态状态切换(已赞高亮、未赞灰色),
  • 点赞按钮 onclick函数开头开始计时,setData回调函数开头结束计时;

在红米手机(Redmi 6 Pro)上进行多次测试,求其平均值,结果如下:

列表数量 微信原生 wepy mpvue taro uni-app chameleon
200 91 279 666 92 93 101
400 111 501 1507 125 107 145
600 144 - - 152 148 178
800 176 - - 214 181 236
1000 220 - - 229 234 272

说明:也就是在列表数量为400时,微信原生开发的应用,点赞按钮从点击到状态变化需要111毫秒。

测试结果数据说明:

  • wepy/mpvue 测试数据不完整的原因同上,在组件较多时,页面已经不再渲染了
  • 基于微信自定义组件实现组件开发的框架(uni-app/taro/chameleon),组件数据通讯性能接近于微信原生框架,远高于基于template实现组件开发的框架(wepy/mpvue)性能

组件数据更新性能测评:微信原生开发,uni-app,taro > chameleon > wepy > mpvue

综上,本性能测试做了2个测试,长列表加载和组件状态更新,综合2个实验,结论如下:

微信原生开发手工优化,uni-app>微信原生开发未手工优化,taro > chameleon >> wepy > mpvue