最新前端框架排⾏榜（附性能等多⽅⾯对⽐）作者：Ryan Carniato
译者：王
之前我在⽹上闲逛的时候发现了⼀件事，那就是两年多来都没⼈做⼀次⾼⽔平的 Java 框架性能对⽐。所以在 2021 年伊始，我们就来点乐趣，让这些库好好较量⼀下吧。本⽂主要出于娱乐⽬的，在某种意义上说，会具有⼀定的参考意义。
该怎么对⽐呢？那就选出 20 个最受欢迎的 Java 框架，并⽤ JS Framework Benchmark 来⼀场针锋相对的⼤⽐拼如何？
免责声明：这篇评测主要是出于娱乐⽬的，可能也会有些实际价值。⼀如既往，这⾥提到的每⼀个库在⼤多数场景中效率都很⾼。如果有什么需要强调的话，那就是测出的性能优势可能来⾃多种不同的技术和技巧组合。虽然你可以将本⽂当做参考，但你应该⾃⼰去验证框架在各个⽤例中的性能。你可以在这⾥到最新的官⽅成绩对⽐：
如果你想进⼀步了解这个基准测试，可以参阅我写的这篇指南：
还有⼀点需要提⼀下，我是 Solid Framework 的作者，因此我免不了会在⽂章中掺杂⼀些偏见。但我的打算是尽量让数字说话。了解过这些背景后，就请坐下来欣赏⽐赛吧。
⽐赛开始
我⽤的是 JS Framework Benchmark 中最新的 Chrome 87。它们是⽤⼀部安装 Fedora 33 系统的 Core i7 Razor Blade 15 测出来的，且缓解措施已关闭。
我排除掉了所有有问题的实现，然后选出 Github 星级最多的前 20 个库。对于拥有多个版本的库，我选的是它们的最新版本和没有使⽤第三⽅库的性能最⾼的分⽀。
1.Vue（177k）
2.React（161k）
3.Angular（68.9k）
4.Svelte（40.5k）
5.Preact（27.9k）
6.Ember（21.7k）
7.HyperApp（18.2k）
前端有哪些常用框架8.Inferno（14.6k）
9.Riot（14.4k）
10.Yew（14.2k）
11.Mithril（12.5k）
12.Alpine（12.4k）
13.Knockout（9.9k）
14.Marko（9.9k）
15.Rax（7k）
16.lit-html（6.9k）
17.Elm（6.2k）
18.Ractive（5.8k）
19.Solid（4.7k）
20.Imba（4.1k）
注意：对于 lit-html，我⽤的是 LitElement 实现，因为标准版标记了⼀个问题。它的开销应该很⼩，因为它是包装在单个 Web 组件中的原始 lit-html。
这是当下 Web 开发⽣态系统中⾮常优秀的⼀组选⼿。尽管 Github 星级并不能完全说明问题，但测试结果⾥有 100 多个库，因此我需要⼀个标准来选出参赛者。
每个库都会参与三⼤类别的对⽐：DOM 性能、启动指标和内存使⽤情况。此外，我会将这些框架分为 4 组，这样就能
每个库都会参与三⼤类别的对⽐：DOM 性能、启动指标和内存使⽤情况。此外，我会将这些框架分为 4 组，这样就能更好地同性能相近的对⼿对⽐了。但我也会给出三⼤类别的总排名。
在每⼀组中都会有作为参考的标准 Java 条⽬。这⼀实现使⽤了所有最优秀的技术来做优化，以实现最佳性能。它将作为所有对⽐的基线。
下⾯就开始⽐赛吧。
第 4 组——标准性能
这⼀组选⼿最多，包括⼀些最流⾏的库。还有⼀些库有 Facebook、Google、eBay 和 Alibaba 等⼤公司的⽀持。这些库要么不太关注性能表现，要么就是只关注某⼀⽅⾯的性能，⽽在其他⽅⾯表现不佳。
图⽚第 4 组速度成绩
这⾥有很多红⾊和橙⾊块，但请记住，这些库平均只⽐我们精⼼优化的命令式标准 Java 参考慢⼤约⼀倍。400ms ⽐200ms 能慢多少呢？
在纯性能⽅⾯，React 在这⼀组中拔得头筹。但考虑到架构的差异性，React、Marko、Angular 和 Ember 的整体表现竟然会如此接近，这也很让⼈惊讶。不过 React，具体来说是 React Hooks 实现最后胜出。如果你需要额外的函数创建并坚持使⽤类，那么就不⽤对性能抱太⼤期望了。React Hooks 是使⽤ React 的最⾼效途径：
这⾥的库⼤都有简陋的列表排序（导致糟糕的⾏交换性能），或者有很⾼的创建成本。Ember 就是⼀个⾮常突出的典型，因为它的更新性能同组的对⼿要好得多，但创建性能却是最差的。
型，因为它的更新性能同组的对⼿要好得多，但创建性能却是最差的。
最慢的库（Knockout、Ractive 和 Alpine）都有着架构相似的细粒度响应库。Knockout 和 Ractive（也是 Svelte 的作者 Rich Harris 的作品）都起源于 VDOM 库流⾏之前的 2010 年代初期。Alpine 的那点 Java ⽅法渲染起来也是够慢的。下⼀个纯粹的细粒度响应库会在很后⾯的对⽐中才会出现。
接下来，我们将主要根据库的打包⼤⼩来对⽐启动指标类别。
图⽚第 4 组启动成绩
这⾥的排名和之前有很⼤区别。Alpine 的速度表现最差，但我们可以看到它的包最⼩，启动时间最短。Marko（来⾃eBay）紧随其后，接下来是 Rax（来⾃阿⾥巴巴）。这三个库都是为轻量级客户端交互的服务端渲染⽽构建的。所以它们的性能只能排在第 4 组，但启动成绩却在这⼀组中领先。
表格的后半部分是我们在基准测试中包体积最⼤的⼏名选⼿，其中 Ember 成绩最差，⼤⼩是其他任何实现的两倍以上。我不知道为什么要花费超过半兆字节才能渲染出这个表，但不管怎样这都会拖累启动性能。
最后⼀个类别是内存消耗。
图⽚第 4 组内存成绩
内存成绩往往是和之前两类成绩相关联的，因为它会对性能产⽣重⼤影响，同时⼤型库往往会使⽤更多内存。Alpine、Marko 和 React 位居前三。⽼旧的细粒度响应库使⽤的内存最多，Ember 敬陪末座。Ember 太吃内存了。仅在页⾯上渲染 6 个按钮之后，它⽤的内存已经⽐标准参考在整个套件中所⽤的还要多了。
第 4 组结果
总体来看，这⼀组库在 GitHub 上总共有 30 万星，可能在 NPM 下载中占据了⼤部分份额。在这组选⼿中，Marko 和Alpine 的平均排名最⾼。React 排名第三，⽽速度表现是最好的。
本组中的⼀些框架在市场份额上遥遥领先，⽽⼀些⽼旧的响应库已经是昨⽇黄花。接下来我们研究⼀些表现更好的选⼿。
第 3 组——重视性能
这⼀组⾥的框架可以说在设计时考虑到了性能需求。它们在包⼤⼩指标上也下了功夫，并且在创建和更新成本之间到了平衡。
我们在本组中能看到五花⼋门的⽅法。⽐如 Yew，⼀个 WebAssembly 框架（⽤ Rust 编写）；LitElement，⼀个 Web 组件。最近发布的 Vue 3 是这个框架的重⼤进化，让它⾛出了第 4 组，开始和⼀些之前没有遇到过的对⼿直接竞争。
闲话少提，下⾯来看看它们的表现。
图⽚第 3 组速度成绩
整体分数提⾼了⼀些，同组内的差距也⼤多了。Preact 是本组中速度最快的，LitElement 则以微弱劣势紧随其后。Vue 3 和 Riot 速度相近，都位居中游，它们也都有过响应性和 VDOM 并存的历史。Mithril 是最早将速度放在⾸位的 VDOM 库之⼀，⽽ Yew 作为唯⼀的 WASM 库落在了最后。
在性能 profile ⽅⾯，所有这些库都差不多。这组⾥⾯没有纯粹的的响应库。它们都使⽤⾃上向下的渲染⽅式，⽆论是VDOM 还是简单的 Tag Template Literal diff 都⼀样。与上⼀组相⽐，它们的列表处理更智能些（参阅⾏交换性能）。但多数框架的⾏选择性能还是最低⼀档。
Yew 是个例外，但它的其它指标都差不少。我们看看其他测试有没有什么不同。
图⽚第 3 组启动成绩
情况有所改观，但在启动指标⽅⾯ Preact 仍处于领先地位。Yew 是本组中唯⼀称得上⼤型库的。WASM 库的确偏⼤。
这⾥我们⼜能看到⼀些相近的成绩。Vue 也很⼤，仅次于 Yew。Preact 和 Riot 的表现⾮常接近。Mithril 和 LitElement 也差不多，都位居中游。
Preact 是 React 的⼀个 4kb 替代品，它显然是我们⽬前见过的最⼩的库，但后⾯还有更⼩的呢。不管怎样，本组中的这些库都不需要⽤户太操⼼它们的包⼤⼩。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。