有关第一部分的文章,请访问 https://engineering.footballradar.com/from-a-react-point-of-vue-comparing-reactjs-to-vuejs-for-dynamic-tabular-data/ 。第一篇文章的实验结果已经被证明有错误,但是它为这篇文章奠定了基础。

五月23日,周一,我们发布了一篇关于比较 React 和 Vue 的性能的文章,其实验数据比较了二者谁更适合处理频繁更新的列表数据。特别是在对性能要求非常高的情况下,比方说我们手头上的一个足球雷达(Football Radar)的项目。

最初我们对实验结果信心满满,但发现几个较为重要的错误后,才知道实验结果并非像我们预期的那样。我们非常感谢在 React 和 Vue 社区里的宝贵意见 —— 特别是 React 的核心工程师克里斯托弗(Christopher Chedeau) (@vjeux),和 Vue 的创始人埃文(Evan You)(@youyuxi)—— 因为你们,我们才能快速的锁定这次测试中的出现的问题,可以说是因祸得福,尽管错误被公开使我感到有一些小小的尴尬,但我的确学到了很多,所以衷心的感谢你们的讨论。

虽然我们已为第一篇文章做了许多改进,仍不能否定还有进一步改进的余地。因此这篇文章更像是一篇游记,而不是一个全面完善的结果。

首先我还是重申一下这次实验的目的。然后我会讲一下我们所犯的错误 —— 掌声送给那些帮助我们改正错误的人 —— 最后我会公布新的更公正的测试结果。

测试

这个实验的输出是一组足球比赛,每一个都一秒更新一次数据。在实验中,为了测试性能及可拓展性,我们会修改两组独立的数据:足球比赛数量和每次更新之间的延迟。

为了模拟页面加载情况及测量其可扩展性,我们分别使用 Vue 和 React 测试了50,100,500场比赛,其延迟分别是100ms,1s,然后看其可拓展性如何。

我们的第一次结果不太客观,显示 Vue 的性能表现比 React 要好很多,其实是因为测试运行在开发模式(Development Mode),而这个疏忽直接造成了结果偏差。感谢克里斯多弗(@Christopher)提出这个问题:https://github.com/footballradar/VueReactPerf/pull/3。在生产模式(Production Mode)运行 React 忽略了一些消耗资源较大的进程,包括了 prop-types 的检查和警告。尽管这是一个非常明显的优化,但由于 React 默认运行在开发模式,所以这个优化很容易被忽略掉。我们要强调的是 Vue 也是运行在开发模式的,二者都同样被影响到了。那篇 pull-request 里接下来的相关讨论都非常醍醐灌顶。

我们也用了一些无效的测试数据,这使得 Vue 比起 React 在同等条件下快了10倍。在我们的测试中,两个框架都具有相同的测试数据。但是 Github 上的 pull-request 里的那个版本并没有确保这点一致性,所以其他测试的人也许会看到这个具有误导性的结论。

与上一个测试相比的改变

新发现

以下是部分的开发者工具 timeline 的概要,在下面的这个项目里有实际的栈和 timeline 的截图:[https://github.com/footballradar/VueReactPerf/tree/master/results/v2

有意思的是,Chrome 的开发工具在获取 Vue 的 500 场比赛测试结果的 30s 时间线时崩溃了,但 React 的 500 场比赛测试却没有。我们截取了 15s 的结果以取代它,但是让人不解的是,Vue 相比于 React,其实有更多的空闲时间。

所有下面的结果都共享同一个主题:由于 React 的虚拟 Dom 的实现,它的 scripting 上运行的时间更长;Vue 由于要直接更改 Dom ,所以它有关在 painting 和 rendering 工作上更耗费资源。然而,所有工作都做完以后,Vue 在大多数情况下仍然比 React 快25%。这虽然不同于我们最初的巨大区别,仍然是一个值得关注的问题。

50 场比赛,100ms 的延迟

React:

Vue:
##### 50 场比赛,1s的延迟 React:

Vue:
##### 100 场比赛,100ms 的延迟 React:

Vue:
##### 100 场比赛,1s 的延迟 React:

Vue:
##### 500 场比赛,100ms 的延迟 React:

Vue:
##### 500 场比赛,1s 的延迟 React:

Vue:

结论

总的来说,最初那个 Vue 比 React 表现好的结论在这个用例上仍然是有价值的,但是明显还有很多可以优化的地方,特别是 React。一个附带的结论是是,需要多少的工作和相关知识,才能提高 React 的性能,而 Vue 在开箱即用的情况下就优化的很好。但不管我们说些什么,Vue 的开发者体验毫无疑问是更棒的。

p.s 译注:还是推荐英语好的可以直接看原文,我觉得我的翻译在信达雅的层面上还值得更进一步。。