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

很多开发者朋友在初次认识 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 文件。

二、测试流程

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

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

三、DEMO 与列表渲染测试

Taro

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

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

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

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

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

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

所属平台	iPhone 首次渲染 取 3 次平均值	iPhone 更新列表 取 5 次平均值	三星更新列表 取 3 次平均值	三星更新列表 取 5 次平均值	荣耀更新列表 取 3 次平均值	荣耀更新列表 取 5 次平均值
微信小程序	14.054ms	17.935ms	20.525ms	19.164ms	124.699ms	22.677ms
FinClip	27.488ms	63.901ms	70.667ms	81.4ms	19.667ms	37.2ms
支付宝小程序	17.67ms	18ms	87.33ms	61.6ms	31.33ms	46.2ms
头条小程序	真机及运行报错		真机运行失败		真机运行失败
百度智能小程序	5ms	5.4ms	无法正常渲染		1ms	2.2ms

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

kbone

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