OneAPM大讲堂 | 谁更快？JavaScript 框架性能评测

文章系国内领先的 ITOM 管理平台供应商 OneAPM 编译呈现。

网页性能是一个丰富且又复杂的话题。在本帖中，我们会将讨论的范围局限在前端 JavaScript 框架上，探究相对于另外一种框架而言，使用当前的框架会如何影响您的应用程序的性能。我们会特别关注两点：

(1)某种框架要使用多长的时间来更新用户界面

(2)为了让框架正常工作，下载和解析所需要的软件包所花费的时间

在过去几年中，我所使用的这些数据一直来源于 Stefan Krause 的 js-framework-benchmark。资源很好，但也有点复杂了。仅关注部分结果应该会更简单一些，而本文中我们也正是这样做的。建议您看看 Stefan 所构建的工具，自己先深入了解一下这些数据，尤其是如果下面的图片中没有你最钟意的框架的话。这些资源可以从 Stefan 的网站上获取(他已测试过 40 多个框架)。

另外需要注意的是：

这些只是初步的统计结果，使用时需谨慎(比如，它们可能来自不同的浏览器版本)。

请留意这个问题。

窥探数字

第一组要关注的结果是每一种框架需要多长的时间在一个大型表格上进行各种操作，例如创建行，删除行等等。重要的一点是，这些是有键框架的数据结果。以下是来自 Stefan 站点的解释：

有键的实现通过设定键值在域数据和 dom 元素之间创建了某种关联。如果数据变更了，与该键关联的 dom 元素也会被更新。因此，往数据列表里增添或删除元素会导致 dom 发生相应的变化。

在下图中，越大的数字表示框架执行任务越慢。表格底部的“减速几何平均“是一项总的性能指标，从左至右，依次表明了各个框架的评级。最左端是 vanillajs ，表示无框架的实现，做为一个参考点。

 

 

如您所见，这里我囊括了大部分流行的前端框架，以及一些不太有名，但是非常有趣的框架。 Preact (一个非常流行的框架)和 Inferno 具有与 React 非常类似的应用编程接口(API)，所 以我也将他们包含了进来。如果你的团队正在使用 React 搭建对性能要求很高的应用，那他们或许是不错的选择。另外要注意的是，有键框架得出的结果通常会比较慢一些，因为框架要完成更多的任务。

在这些最流行的框架中，Vue 看起来相当出色。Angular 和 React 都是显著偏慢的框架，两者给出的性能数据也相差无几。Inferno 的库是其中的佼佼者。作为题外话，Inferno 的作者 Dominic Gannaway 新近被 Facebook 聘用，参与到 React 团队中。

现在来看一些无键框架的统计结果：

 

 

需要注意几点。首先，这里列出的框架数量要少一些，因为并非每一种框架都有无键的结果。最快的要数 Svelte，这种框架很有趣，采用不同的方式实现，你也应该对其一探究竟。

在开始后续的话题之前，如果不提一提高居榜首的 Surplus (由 Adam Haile 开发)，那未免显得有些失职。它在有键和无键的测试结果中都脱颖而出。另外，还有其他一些表现优异的框架包括 petit-dom 和 dio ，我没有将它们列在上面是因为我想用更多的篇幅讨论最受欢迎的那些库和框架。如果你查看结果统计表，你很快会被这庞大的统计数据搞得沉重不堪。因此对其做一些修正，让事情变得可控，以更好地达到我们的目的。

启动指标

之前的结果关注完全加载页面以及在大型表格上执行操作时框架的执行速度。下面的一组数据则是从另一个不同的视角来衡量框架的性能——下载，解析和编译所耗费的时间。

这些统计值可以告诉我们，用户需要等待多长的时间后加载的页面才能开始正常工作。通常来讲，要下载的 JavaScript 越多，浏览器需要解析和编译的代码量越大，所需要的时间就越长。

同样的，这些统计结果也是分为有键的和无键的。我们先来看看有键的统计结果：

 

 

这些用于评级的指标值并不能很方便地说明问题，但通常而言，绿色代表较好，红色代表逊色。同样地， Inferno 表现优异，Svelte 和 Preact 也相当出色。在这些最受欢迎的框架中，Vue 表现最好，而 Ember 则垫底榜单，落后于其他的对手。

现在来看看无键的统计结果：

 

 

在这一组中，Svelte 表现得非常快速且轻量级。其 total byte weight 值甚至比纯 vanilla JavaScript 还低。我告诉过你，这是一种非常有趣的框架，没错吧!

后续思考

一个月前，在读了 Addy Osmani 所著的 The Cost of JavaScript 一书后，我脑海里便萌生了撰写该文的念头。他分享的一张图表给了我启示。该图展示了在不同的移动设备上，一个 250KB 用 gzip 压缩的(未解压缩时为 1MB ) JavaScript 包需要花费多长时间完成解析。图中特别标出了平均设备的统计值，如下所示：

 

 

前端的 JavaScript 框架是一项引人关注的工程技术。它们很复杂，且不容易做好。针对特定的项目使用哪一种框架常常也很难抉择，其中有许多需要权衡的因素。例如，像 React 这样的框架具有一个大型的生态系统，通过提供许多第三方的库和丰富的培训资料，以及其他一些优势，可以加速你的项目进度。但如果你的项目是针对 2G 网络用户的，React 还会是最佳的选择吗?答案也许是否定的。

判断哪一种框架会工作得最好最终都取决于项目需求，以及构建项目的团队。希望本文所展示的结果能够给读者的思考带来一些源泉。

Browser Insight 是一个基于真实用户的 Web 前端性能监控平台，能够帮大家定位网站性能瓶颈，网站加速效果可视化；支持浏览器、微信、App 浏览 HTML 和 HTML5 页面。想阅读更多技术文章，请访问 OneAPM 官方技术博客。

来源：http://blog.oneapm.com/apm-tech/806.html