小程序框架与平台编译对比

很多开发者朋友在初次认识 FinClip 时,都不免将其与市面上常见的小程序平台(如百度智能小程序,字节小程序,微信小程序,支付宝小程序)进行对比,好奇同样的一份小程序代码在不同平台中的编译速度与体验如何。

此外,开发者在使用常见的第三方小程序框架(如 taro,kbone,uniapp)时,会发现各家框架厂商都宣称通过自己的框架能编译出不同平台下最好用,最流畅的小程序,开发者受限于精力与时间不够,也无法对其进行足够仔细地辨别与区分。

在本文中,我们邀请了 FinClip 前端开发工程师蒋雪,使用不同的编译框架编译出不同平台的小程序 DEMO,并在 iOS 与 Android 设备中进行实际体验对比,针对「小程序的稳定性,框架支持度,列表渲染性能,操作系统支持度,组件支持度与跨平台性」进行综合对比,从而帮助开发者找出最适合自己的小程序平台与框架。

作为 FinClip 背后的产品设计者与开发者,我们的观点可能并不中立(我们会尽可能在测试中保持客观)。您可以访问 https://www.finclip.com/ 来了解我们的产品与功能,以此印证文中观点。

一、测试设备与环境

本次测试中,我们使用了 FinClip 日常测试环境中的三款设备机型,分别是:

  • iPhone XS(系统版本为 iOS 13.5)
  • 三星 SM-J3300(系统版本为 Android 9)
  • 荣耀 50 JLH-AN00(系统版本为 Android 11)

本次使用的宿主 App 与版本如下:

  • 微信(iOS 端版本为9.0.17,Android 端版本为 8.0.18)
  • 支付宝(iOS 端版本为 10.2.53,Android 端版本为 10.2.53)
  • 今日头条(iOS 端版本为 8.6.2,Android 端版本为 8.6.6)
  • 百度(iOS 端版本为 13.2,Android 端版本为 13.2)
  • FinClip App(iOS 端版本为 2.35.2,Android 端版本为 2.35.3)

本次测试使用的 DEMO 如下:

  • taro-ui,kbone,uniapp 官方 demo

二、测试流程

为了保证最终能够得到公平一致的测试结果,我们使用了如下的评测方式:

相同的测试流程才能保证公平的测试结果

三、DEMO 与列表渲染测试

Taro

我们从 Github 中下载了官方的示例 DEMO 文件,并在各个 IDE 中进行编译预览。

首先是在 IDE 中进行编译展示,通过上图可以看出各家小程序平台对于该 DEMO 都能够进行正常的渲染与体验,但是在实际测试过程中我们发现,支付宝小程序 IDE 在进入「视图」页面时会提示报错,在使用真机打开「视图」页面时也会报错(如下图)。

使用支付宝 IDE 进入「视图」界面时会报错

当使用真机预览进入「高阶」页面时,还会遇到底部日历遮挡的问题。

月末的日历组件无法全部显示

此外,我们为了测试 Taro 对于列表的渲染能力,还使用了 taro-msparis 这个项目(Msparis 项目基于 Taro,构建了一个时装衣橱的项目演示,涉及了一个电商平台完整的业务逻辑和功能点),分别使用真机在「首次渲染,更新列表」的情况下进行多次测试,得出结果如下。

所属平台iPhone 首次渲染
取 3 次平均值
iPhone 更新列表
取 5 次平均值
三星更新列表
取 3 次平均值
三星更新列表
取 5 次平均值
荣耀更新列表
取 3 次平均值
荣耀更新列表
取 5 次平均值
微信小程序14.054ms17.935ms20.525ms19.164ms124.699ms22.677ms
FinClip27.488ms63.901ms70.667ms81.4ms19.667ms37.2ms
支付宝小程序17.67ms18ms87.33ms61.6ms31.33ms46.2ms
头条小程序真机及运行报错真机运行失败真机运行失败
百度智能小程序5ms5.4ms无法正常渲染1ms2.2ms

值得一提的是,在使用三款手机进行真机测试时,头条小程序均无法正常运行,使用三星手机打开百度智能小程序时,也无法正常渲染

kbone

我们从 Github 中下载了由 DCloud 提供的 kbone 示例 DEMO 文件,并在 IDE 中进行编译预览。

同样,我们分别使用真机在「首次渲染,更新列表」的情况下进行多次测试,得出结果如下。

所属平台iPhone 首次渲染
取 3 次平均值
iPhone 更新列表
取 5 次平均值
三星更新列表
取 3 次平均值
三星更新列表
取 5 次平均值
荣耀更新列表
取 3 次平均值
荣耀更新列表
取 5 次平均值
微信小程序0.78ms1.48ms1.627ms1.372ms1.67ms5.8ms
FinClip236ms650ms6.33ms6.8ms2.67ms4.2ms
由于 kbone 仅支持微信小程序语法,因此仅在微信开发者工具与  FIDE 中进行了测试,支付宝官方提供了 Antmove,但尝试后发现依然无法编译。

uniapp

我们从 Github 中下载了官方的示例 DEMO 文件,并通过 uniapp 进行跨端编译,按照不同平台的要求输出对应的小程序,并在各个 IDE 中进行编译预览。

在 IDE 中进行编译展示时,除了支付宝小程序 IDE 会提示编译失败以外,剩下的小程序 IDE 都完成了对应的编译与预览操作。此外,我们也使用了 uniapp 的 DEMO 对于列表渲染进行多次测试,测试方式依然是使用真机在「首次渲染,更新列表」的情况下进行多次测试,得出结果如下。

所属平台iPhone 首次渲染
取 3 次平均值
iPhone 更新列表
取 5 次平均值
三星更新列表
取 3 次平均值
三星更新列表
取 5 次平均值
荣耀更新列表
取 3 次平均值
荣耀更新列表
取 5 次平均值
微信小程序520ms417.33ms3355.67ms1360.17ms383.67ms249.88ms
FinClip179.33ms120.88ms1290.33ms997.29ms317ms350ms
支付宝小程序517.33ms242.25ms3021.33ms1063.75ms570ms282ms
头条小程序125.33ms92.13ms打开失败323ms263.86ms
百度智能小程序114.33ms82.12ms816.67ms834.88ms134.67ms236.76ms

四、支持组件测试

此外,我们还根据对应平台开发者文档中,支持的小程序组件进行了对比,所得情况如下:

💡
注意,被标黄的部分为小程序平台原生所支持的组件
组件微信小程序支付宝小程序FinClip头条小程序百度智能小程序
cover-image
图片视图
cover-view
文本视图
match-media
media query 匹配检测节点
movable-area
movable-view 的可移动区域
movable-view
可移动视图容器
page-container
页面容器
scroll-view
可滚动视图区域
share-element
共享元素
swiper
滑块容器视图
swiper-item
swiper 组件内容
view
视图容器
icon
图标组件
progress
进度条
rich-text
富文本
text
文本
button
按钮
checkbox
多选项目
checkbox-group
多项选择器
editor
富文本表及其
form
表单
input
输入框
keyboard-accessory
键盘顶部工具栏
label
改进表单组件可用性
picker
底部弹起滚动选择器
picker-viewer
嵌入页面的滚动选择器
picker-view-column
滚动选择器子项
radio
单选项目
radio-group
单项选择器
slider
滑动选择器
switch
开关选择器
textarea
多行输入框
functional-page-navigator
跳转至插件功能页
navigator
页面链接
audio
音频
camera
系统相机
image
图片
live-player
实时音视频播放
live-pusher
实时音视频录制
video
视频
voip-room
多人音视频对话
map
地图
canvas
画布
ad
Banner 广告
ad-custom
原生模板广告
official-account
公众号关注组件
open-data
展示微信开放数据
web-view
承载网页容器
native-component
小程序中客户端原生组件
aria-component
无障碍访问
navigation-bar
页面导航条配置节点
page-meta
页面属性配置节点
与微信功能相同的组件数量 5132443438
webrtc-audio
实时音频
webrtc-video
实时视频
lottie
动画
map
高级定制渲染
lifestyle
关注生活号
contact-buttpn
智能客服
error-view
异常视图
UI
组件
46
营销组件9
tabs
标签栏
tab-item
标签栏子项
animation-video
透明视频动画
animation-view Lottie
动画
ar-camera
AR 相机
rtc-room
实时音视频通话房间
rtc-room-item
实时音视频通话画面
follow-swan
关注小程序
inline-payment-panel
内嵌支付组件
like
点赞
one-step-interaction
一站式互动
comment-list
评论列表
comment-detail
评论列表
swan-sitemap
小程序索引页
ECharts
图表
搜索组件
推荐组件
轮播图组件
线索组件
云加速服务
地址组件
发票组件
组件总数5192463460

五、综合对比

根据前文测试与对比结论,我们分别基于「稳定性,小程序框架支持度,列表渲染性能,操作系统支持度,组件支持度,跨平台性」进行综合考量与对比。

稳定性

根据三种机型的测试体验,在头条小程序与百度智能小程序中,安卓机型的运行效果是不稳定的,尤其在头条小程序中,Taro 框架的列表展示 DEMO 三台机器均无法正常打开。 而百度小程序则会出现在安卓低端机型中无法正常打开的情况。

👉 根据本次测试结果,稳定性排序如下:

微信小程序 = FinClip = 支付宝小程序 > 百度智能小程序 > 头条小程序

小程序框架支持度

可以看出各平台都已经支持了在 Taro 和 uniapp 框架下的小程序,但个别功能依然存有 Bug。在头条小程序中可以运行简单的 DEMO ,但复杂 DEMO 安卓端几乎全军覆没。

而在 kbone 框架中, 只有微信小程序与 FinClip 支持运行,且都能正常运行体验。当我们使用 Antmove 工具转换后, 依然无法在支付宝小程序中正常运行。

👉 根据本次测试结果,框架支持度排序如下:

微信小程序 = FinClip > 支付宝小程序 = 百度智能小程序 > 头条小程序

列表渲染性能

根据测试数据,微信小程序、 FinClip、 支付宝小程序在列表渲染性能上是比较接近的。出乎意料的是百度智能小程序在这些 DEMO 测试中,渲染耗时最少。头条小程序则因表现不稳定暂不参与排序。

👉 根据本次测试结果,渲染性能排序如下:

百度智能小程序 > 微信小程序 = FinClip = 支付宝小程序

操作系统支持度

根据测试结果整体来看,当前所有小程序在 iOS 操作系统中的体验是优于Android 操作系统的,我们后续将会引入鸿蒙系统进行测试对比。

组件支持度

考虑到当前市场中微信小程序的领军地位,我们以微信小程序组件对标支持度作为了评比标准之一。

👉 根据本次测试结果,组件支持度排序如下:

微信小程序 >  FinClip > 百度智能小程序 > 头条小程序 > 支付宝小程序

👉 而如果以各平台中组件数量进行排序,排序如下:

支付宝小程序 > 微信小程序 > 百度智能小程序 > FinClip > 头条小程序

跨平台性

在参与对比的五个小程序平台中,只有 FinClip 在支持自身语言之外,还同时兼容微信小程序的语言。相比支付宝小程序,头条小程序而言,FinClip 的兼容性更强,无须使用代码转换工具就能与微信小程序共用一套代码,在上架双平台时也能避免因代码转换所引起的其他问题与 Bug。

六、后记

在设计 FinClip 起初,我们有着这样的考虑:

在企业数字化转型的过程中,已有 Web 应用与 H5 应用将不得不面临需要提升用户体验与业务性能的问题,而在转向通过小程序提供服务的过程中,又需要如何将在流量平台中已经上架的小程序迁移至自有 App 中?如何让自有 App 具备运行小程序的底层容器引擎?

因此,我们希望自己所提供的小程序解决方案,不仅需要解决企业当下所面临的“小程序迁移”问题,也需要能够帮助企业考虑到数年内(甚至更长),而不需要再根据新遇到的问题寻找新的解决方案。

此外,除了小程序本身的运行能力以外,FinClip 还具备对小程序全生命周期进行管理的能力,对于与企业内部已有信息系统进行关联,也提供了完成自动化、定制化支持的相关工具与资源,从而能够更可靠,可信地帮助企业完成数字化转型这一过程。

如果您有对小程序的设计,研发与使用的相关想法,都欢迎登录 FinClip.com 查找答案,如果在使用过程中遇到问题,也欢迎与我们联系。