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

Posted 2021-06-10 Rust 生态与实践

最初，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 web 前端库/框架评测，以及和 js 前端库/框架的比较的主要内容，如果未能解决你的问题，请参考以下文章

web前端 | 你还在用jQuery？

web前端开发主要是做啥的

web前端技术基础课程讲解之Vue.js构建方式

web前端技术基础课程讲解之Vue.js构建方式

WEB前端热门框架教程：Vue.js

js 框架及uI框架