Rust web 前端库/框架评测，以及和 js 前端库/框架的比较

最初，js-framework-benchmark 这个项目，如同名称含义，仅是评测 js 生态的框架性能的。后来，作者增加了 Rust 实现的 WebAssembly 库和框架，如 wasm-bindgen、stdweb、yew，以及 seed 等的评测。

评测指标比较丰富，可信度也较高。包括：

  • 行创建：页面加载后，创建 1000 行的消耗时间（无预热）。
  • 大批量行创建：创建 10000 行的消耗时间（无预热）。
  • 添加行到大容量表格：在 10000 行的表格上添加 1000 行的消耗时间（无预热）。
  • 行替换：替换表格中 1000 行的全部内容的消耗时间（5 次预热）。
  • 部分更新：对于有 10000 行的表格，每 10行 更新一次文本的消耗时间（5 次预热）。
  • 行选择：点击某行，让其突出显示，计算响应消耗时间（5 次预热）。
  • 行交换：对于有 1000 行的表格，交换 2 行时的消耗时间（5 次预热）。
  • 行删除：删除 1000 行表格的消耗时间（5 次预热迭代）。
  • 行清除：清除 10000 行的表格数据的消耗时间（无预热）。
  • 就绪（加载）内存：页面加载后的内存使用情况。
  • 运行内存：添加 1000 行后的内存使用情况。
  • 更新内存：对于 1000 行的表格，执行 5 次更新后的内存使用情况。
  • 替换内存：对于 100 行的表格，执行 5 次替换后的内存使用情况。
  • 重复清除内存：对于 1000 行的表格，执行 5 次创建和清除后的内存使用情况。
  • 启动时间：加载、解析 JavaScript 代码，以及呈现页面的消耗时间。
  • 持续交互：TimeToConsistentlyInteractive，其是比较悲观的 TTI 度量指标——当 CPU 和网络都较空闲时，即不再有超过 50ms 的 CPU 任务。
  • 脚本启动时间：ScriptBootUpTtime 度量指标，解析、编译、评估所有页面脚本所消耗的时间，单位为毫秒。
  • 主线程工成本：MainThreadWorkCost 度量指标，执行在主线程上的工作所消耗的总时间。包括样式、布局等。
  • 总数据量：TotalByteWeight 度量指标，加载到页面中的所有资源的网络传输成本（压缩后）。

另外，评测结果分类上，分为关键指标结果和非关键指标结果。

Rust web 前端库/框架在所有前端库/框架的位置

从评测结果来看，wasm-bindgen 性能和 vanillajs 处于同一水平，甚至有几项已经超越。虽然说，目前 wasm-bindgen 还处于初级阶段，但其总需要通过 web-sys 和 js-sys 与 JavaScript 交互。所以除非前端技术有什么超级大的变革，否则 wasm-bindgen 最好的性能估计也就是总体和原生 vanillajs 保持持平吧。

评测仓库未有 markdown 文件，所以笔者对评测结果截图：

消耗时间（毫秒）± 95%

rust 消耗时间

启动指标（含移动终端）

rust 消耗时间

内存分配（MB）± 95%

rust 消耗时间

Rust web 前端库/框架评测概览

Rust web 前端库中，参与评测的有 8 个：wasm-bindgen、stdweb、yew、seed、simi、dominator、maple，以及 delorean。后面 4 个处于起步阶段（是指项目完成度的起步，非存在时间的长短），具体大略信息如下：simi（起步阶段，gitlab）、dominator（看项目描述不错，并未使用虚拟 DOM，而是使用原生 DOM 以获取最大的性能）、maple（起步阶段）、delorean（起步阶段）。

具体来说，wasm-bindgen、stdweb 是 wasm 模块与 JavaScript 之间的高层次交互库。虽然也属于 web 前端，但与 yew、seed 等框架是不同，类似 vanillajs 与 reactjs、vuejs。所以 wasm-bindgen、stdweb 肯定是各项评测性能都胜出的。

评测仓库未有 markdown 文件，所以笔者对评测结果截图：

消耗时间（毫秒）± 95%

rust 消耗时间

启动指标（含移动终端）

rust 消耗时间

内存分配（MB）± 95%

rust 消耗时间

yew 框架和其它流行前端框架的评测比较

具体到还处于初始阶段的 yew 框架来说，虽然功能已经较齐全，但还是很不成熟的。笔者在文章《Rust 和 Wasm 的融合，使用 yew 构建 web 前端（3）- 资源文件及小重构》中曾提及：yew 生产环境的应用。笔者仅是 yew 的初学者，理解不很恰当。根据对官方 API 文档的理解，个人认为当前版本（yew 0.18）用于生产环境，是一个不小的挑战（包括开发和维护）。但从项目源码、issues 讨论，以及路线规划来看，个人认为下个版本（yew 0.19），差强人意。等待发布后，yew 0.19 用于个人或者团队的生产环境，是可以接受的。

但从 yew 的性能评测结果，以及和 reactjs、angularjs 的比较来看，是完全可以接受的。

评测仓库未有 markdown 文件，所以笔者对评测结果截图：

消耗时间（毫秒）± 95%

rust 消耗时间

启动指标（含移动终端）

rust 消耗时间

内存分配（MB）± 95%

rust 消耗时间

至于另一个较完善的 Rust web 前端框架 seed，处于较靠后的位置，截图没有体现。更详细全面的所有 web 前端库/框架的评测和对比，请参阅页面 js-framework-benchmark/current.html。

当然，所有的评测场景都是有局限性的，生产环境的性能表现，关联到了太多的额外因素。所以任何评测结果，都仅只能做为一个参考。

谢谢您的阅读！