最初,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%
启动指标(含移动终端)
内存分配(MB)± 95%
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%
启动指标(含移动终端)
内存分配(MB)± 95%
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%
启动指标(含移动终端)
内存分配(MB)± 95%
至于另一个较完善的 Rust web 前端框架 seed,处于较靠后的位置,截图没有体现。更详细全面的所有 web 前端库/框架的评测和对比,请参阅页面 js-framework-benchmark/current.html。
当然,所有的评测场景都是有局限性的,生产环境的性能表现,关联到了太多的额外因素。所以任何评测结果,都仅只能做为一个参考。
谢谢您的阅读,欢迎交流。