NiQin (blog: 泥芹) shared the aphorism --
生活赋予我们的一种巨大的和无限高贵的礼品,这就是青春:充满着力量,充满着期待、志愿,充满着求知和斗争的志向,充满着希望、信心的青春。 -- 保尔·柯察金

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

💥 内容涉及著作权,均归属作者本人。若非作者注明,默认欢迎转载:请注明出处,及相关链接。

Summary: Rust web 前端库/框架在所有前端库/框架的位置、Rust web 前端库/框架评测概览、yew 框架和其它流行前端框架的评测比较。

Topics: rust yew rust-web web-前端 wasm-bindgen

最初,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

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

谢谢您的阅读!


Related Articles

  1. [Rust] RustHub.org:基于 Rust-Web 技术栈,及 image-rs、fluent-rs、rhai-script ……
  2. [WebAssembly] yew SSR 服务器端渲染
  3. [Rust] async-std 创建者对于最近“项目是否已死?”,移除对其支持等的答复
  4. [Rust] Rust 1.56.0 版本和 Rust 2021 版次发布,新特性一览,及项目的迁移、升级
  5. [WebAssembly] Rust 和 Wasm 的融合,使用 yew 构建 WebAssembly 博客应用的体验报告
  6. [Rust] Rust 官方周报 399 期(2021-07-14)
  7. [WebAssembly] Rust 和 Wasm 的融合,使用 yew 构建 web 前端(5)- 构建 HTTP 请求、与外部服务器通信的两种方法
  8. [Rust] Rust 官方周报 398 期(2021-07-07)
  9. [Rust] Rust 官方周报 397 期(2021-06-30)
  10. [Rust] Rust 官方周报 396 期(2021-06-23)
  11. [Rust] Rust 官方周报 395 期(2021-06-16)
  12. [Rust] Rust 1.53.0 明日发布,关键新特性一瞥
  13. [Rust] 使用 tide、handlebars、rhai、graphql 开发 Rust web 前端(3)- rhai 脚本、静态/资源文件、环境变量等
  14. [Rust] 使用 tide、handlebars、rhai、graphql 开发 Rust web 前端(2)- 获取并解析 GraphQL 数据
  15. [Rust] 使用 tide、handlebars、rhai、graphql 开发 Rust web 前端(1)- crate 选择及环境搭建
  16. [Rust] Rust 官方周报 394 期(2021-06-09)
  17. [Rust] Rust web 前端库/框架评测,以及和 js 前端库/框架的比较
  18. [WebAssembly] Rust 和 Wasm 的融合,使用 yew 构建 web 前端(4)- 获取 GraphQL 数据并解析
  19. [WebAssembly] Rust 和 Wasm 的融合,使用 yew 构建 web 前端(3)- 资源文件及小重构
  20. [WebAssembly] Rust 和 Wasm 的融合,使用 yew 构建 WebAssembly 标准的 web 前端(2)- 组件和路由
  21. [WebAssembly] Rust 和 Wasm 的融合,使用 yew 构建 WebAssembly 标准的 web 前端(1)- 起步及 crate 选择
  22. [Rust] Rust 官方周报 393 期(2021-06-02)
  23. [Rust] Rust 官方周报 392 期(2021-05-26)
  24. [Rust] Rust 中,对网址进行异步快照,并添加水印效果的实践
  25. [Rust] Rust 官方周报 391 期(2021-05-19)
  26. [Rust] Rust,风雨六载,砥砺奋进
  27. [Rust] 为什么我们应当将 Rust 用于嵌入式开发?
  28. [Rust] Rust 官方周报 390 期(2021-05-12)
  29. [Rust] Rust + Android 的集成开发设计
  30. [Rust] Rust 1.52.1 已正式发布,及其新特性详述
  31. [Rust] 让我们用 Rust 重写那些伟大的软件吧
  32. [Rust] Rust 1.52.0 已正式发布,及其新特性详述
  33. [Rust] Rust 官方周报 389 期(2021-05-05)
  34. [GraphQL] 基于 actix-web + async-graphql + rbatis + postgresql / mysql 构建异步 Rust GraphQL 服务(4) - 变更服务,以及小重构
  35. [Rust] Rust 1.52.0 稳定版预发布测试中,关键新特性一瞥
  36. [Rust] Rust 生态中,最不知名的贡献者和轶事
  37. [Rust] Rust 基金会迎来新的白金会员:Facebook
  38. [Rust] Rustup 1.24.1 已官宣发布,及其新特性详述
  39. [Rust] Rust 官方周报 388 期(2021-04-28)
  40. [Rust] Rust 官方周报 387 期(2021-04-21)
  41. [GraphQL] 构建 Rust 异步 GraphQL 服务:基于 tide + async-graphql + mongodb(4)- 变更服务,以及第二次重构
  42. [Rust] Rustup 1.24.0 已官宣发布,及其新特性详述
  43. [Rust] basedrop:Rust 生态中,适用于实时音频的垃圾收集器
  44. [Rust] Rust 编译器团队对成员 Aaron Hill 的祝贺
  45. [Rust] Jacob Hoffman-Andrews 加入 Rustdoc 团队
  46. [机器人] 为什么应将 Rust 引入机器人平台?以及机器人平台的 Rust 资源推荐
  47. [Rust] rust-lang.org、crates.io,以及 docs.rs 的管理,已由 Mozilla 转移到 Rust 基金会
  48. [Rust] Rust 官方周报 386 期(2021-04-14)
  49. [Rust] Rust 编译器(Compiler)团队 4 月份计划 - Rust Compiler April Steering Cycle
  50. [GraphQL] 基于 actix-web + async-graphql + rbatis + postgresql / mysql 构建异步 Rust GraphQL 服务(3) - 重构
  51. [Rust] 头脑风暴进行中:Async Rust 的未来熠熠生辉
  52. [GraphQL] 基于 actix-web + async-graphql + rbatis + postgresql / mysql 构建异步 Rust GraphQL 服务(2) - 查询服务
  53. [GraphQL] 基于 actix-web + async-graphql + rbatis + postgresql / mysql 构建异步 Rust GraphQL 服务 - 起步及 crate 选择
  54. [Rust] Rust 2021 版本特性预览,以及工作计划
  55. [Rust] Rust 用在生产环境的 42 家公司
  56. [Rust] 构建最精简的 Rust Docker 镜像
  57. [Rust] Rust 官方周报 385 期(2021-04-07)
  58. [Rust] 使用 Rust 做异步数据采集的实践
  59. [Rust] Android 支持 Rust 编程语言,以避免内存缺陷
  60. [Rust] Android 平台基础支持转向 Rust
  61. [Rust] Android 团队宣布 Android 开源项目(AOSP),已支持 Rust 语言来开发 Android 系统本身
  62. [Rust] RustyHermit——基于 Rust 实现的下一代容器 Unikernel
  63. [Rust] Rustic:完善的纯粹 Rust 技术栈实现的国际象棋引擎,多平台支持(甚至包括嵌入式设备树莓派 Raspberry Pi、Buster)
  64. [Rust] Rust 迭代器(Iterator trait )的要诀和技巧
  65. [Rust] 使用 Rust 极致提升 Python 性能:图表和绘图提升 24 倍,数据计算提升 10 倍
  66. [Rust] 【2021-04-03】Rust 核心团队人员变动
  67. [Rust] Rust web 框架现状【2021 年 1 季度】
  68. [Rust] Rust 官方周报 384 期(2021-03-31)
  69. [Rust] Rust 中的解析器组合因子(parser combinators)
  70. [生活] 毕马威(KPMG)调查报告:人工智能的实际采用,在新冠疫情(COVID-19)期间大幅提升
  71. [Python] HPy - 为 Python 扩展提供更优秀的 C API
  72. [Rust] 2021 年,学习 Rust 的网络资源推荐(2)
  73. [Rust] 2021 年,学习 Rust 的网络资源推荐
  74. [生活] 况属高风晚,山山黄叶飞——彭州葛仙山露营随笔
  75. [Rust] Rust 1.51.0 已正式发布,及其新特性详述
  76. [Rust] 为 Async Rust 构建共享的愿景文档—— Rust 社区的讲“故事”,可获奖
  77. [Rust] Rust 纪元第 382 周最佳 crate:ibig 的实践,以及和 num crate 的比较
  78. [Rust] Rust 1.51.0 稳定版本改进介绍
  79. [Rust] Rust 中将 markdown 渲染为 html
  80. [生活] 国民应用 App 的用户隐私数据窥探
  81. [GraphQL] 构建 Rust 异步 GraphQL 服务:基于 tide + async-graphql + mongodb(3)- 重构
  82. [GraphQL] 构建 Rust 异步 GraphQL 服务:基于 tide + async-graphql + mongodb(2)- 查询服务
  83. [GraphQL] 构建 Rust 异步 GraphQL 服务:基于 tide + async-graphql + mongodb(1)- 起步及 crate 选择
  84. [Rust] Rust 操控大疆可编程 tello 无人机

Topics

rust(84)

graphql(17)

rust-官方周报(17)

webassembly(16)

wasm(10)

tide(9)

async-graphql(9)

yew(9)

rust-web(8)

rust-官方博客(8)

this-week-in-rust(6)

mysql(5)

actix-web(5)

rbatis(5)

android(4)

mongodb(3)

json-web-token(3)

jwt(3)

cargo(3)

技术延伸(3)

rust-wasm(3)

trunk(3)

handlebars(3)

rhai(3)

async-std(3)

用户隐私(2)

学习资料(2)

python(2)

ai(2)

人工智能(2)

postgresql(2)

rust-compiler(2)

rust-基金会(2)

rust-foundation(2)

rustup(2)

rust-toolchain(2)

rust-工具链(2)

rust-游戏开发(2)

rust-区块链(2)

rust-2021(2)

graphql-client(2)

surf(2)

rust-game(2)

rusthub(2)

tello(1)

drone(1)

无人机(1)

隐私数据(1)

markdown(1)

html(1)

crate(1)

async(1)

异步(1)

旅游(1)

不忘生活(1)

葛仙山(1)

hpy(1)

python-扩展(1)

正则表达式(1)

解析器组合因子(1)

组合器(1)

regular-expression(1)

parser-combinator(1)

regex(1)

官方更新(1)

rust-工作招聘(1)

rust-技术资料(1)

rust-周最佳-crate(1)

rust-web-框架(1)

rust-web-framework(1)

rust-核心团队(1)

rust-core-team(1)

rust-language-team(1)

pyo3(1)

rust-python-集成(1)

python-性能改进(1)

迭代器(1)

iterator-trait(1)

国际象棋(1)

chess(1)

游戏引擎(1)

game-engine(1)

虚拟化(1)

unikernel(1)

rustyhermit(1)

linux(1)

virtualization(1)

sandboxing(1)

沙箱技术(1)

数据采集(1)

异步数据采集(1)

docker(1)

镜像(1)

生产环境(1)

rust-评价(1)

rust-2021-edition(1)

rust-2021-版本(1)

graphql-查询(1)

vision-doc(1)

愿景文档(1)

代码重构(1)

steering-cycle(1)

方向周期(1)

隐私声明(1)

机器人(1)

robotics(1)

rustdoc(1)

rust-编译器(1)

实时音频(1)

real-time-audio(1)

变更服务(1)

mutation(1)

查询服务(1)

query(1)

rust-贡献者(1)

rust-轶事(1)

rust-稳定版(1)

rust-预发布(1)

rust-测试(1)

安全编程(1)

可信计算(1)

安全代码(1)

secure-code(1)

rust-android-integrate(1)

rust-embedded(1)

rust-嵌入式(1)

rust-生产环境(1)

rust-production(1)

网页快照(1)

网页截图(1)

水印效果(1)

图片水印(1)

yew-router(1)

css(1)

web-前端(1)

wasm-bindgen(1)

区块链(1)

blockchain(1)

dotenv(1)

标识符(1)

rust-1.53.0(1)

rust-1.56.0(1)

rust-项目升级(1)

异步运行时(1)

ssr(1)

tokio(1)

warp(1)

reqwest(1)

graphql-rust(1)


Elsewhere

- Open Source
  1. github/zzy
  2. github/sansx
- Learning & Studying
  1. Rust 学习资料 - iRust.net