服务端渲染性能大乱斗:Vue, React, Preact, Rax, Marko

2,453 阅读1分钟
原文链接: zhuanlan.zhihu.com

服务端渲染性能大乱斗:Vue, React, Preact, Rax, Marko 翻译自 Server-side Rendering Shootout with Marko, Preact, Rax, React and Vue从属于笔者的 Web 前端入门与工程实践。注意,所有评测描述结果归于原作者,笔者只是翻译下,如果发现评测有错误的地方请前往对应 Repo 提 PR。

上周阿里巴巴发布了类似于 React 的界面组件库 Rax。Rax 相较于 React 提供了更轻量级并且更通用的渲染实现,它可以运行于 Node.js,浏览器以及 Weex 环境下。Rax 招徕关注的一大特性在于其优秀的服务端性能表现,在测试中有近5倍于 React renderToString 的性能表现(不过最初的测试中是把 React 运行于开发环境下)。


依托于这一特性 Rax 很快获得了大量的关注,同时 Vue 也参与到了这一评测中,Evan You 针对上面所说的环境变量问题提了新的 PR,最后的结果显示 Rax 与 Vue 大概是 React 性能的两倍表现。

 +| React@15.4.2 | 71.8ms         |  1189.31    |
 +| Rax@0.1.2    | 39.4ms         |  1266.69    |
 +| Vue@2.1.8    | 40.4ms         |  1572.41    |

后来 Sasha Aickin 提了新的 PR 得到了如下结果:

-----------compare renderToString----------
Rax#renderToString x 93.09 ops/sec ±4.20% (58 runs sampled)
React#renderToString x 140 ops/sec ±1.29% (74 runs sampled)
Vue#renderToString x 207 ops/sec ±4.22% (72 runs sampled)
Fastest is Vue#renderToString

很快,Preact 也加入到了这一评测当中,并且表现非常优秀:


然后 eBay 的 Marko 也加入了这一评测中,效果也非常好:

Marko 是 eBay 发布的新的 UI 库,提供了非常简单的构建用户界面的方式: