2017主流前端框架之实际性能对比

21CTO

资讯 0 2919 2018-03-07 11:56:31

在近几年的发展中，前端技术特别是前端框架有着爆炸式的增长。它们每一个都能够构建伟大的Web应用。那么，做为开发者该如何比较和决定采用哪个框架用于我们的软件项目中？

首先，我们需要做一个有意义的比较，需要关注以下之重要因素：

1.真实运营的应用。不能仅仅是“待办”。通常待办不能传达真实的知识和观点来建立真正的应用程序；
2.标准化。符合一定规范的项目。托管在一个服务器，包括后端API，静态HTML，CSS与规范。
3.由专家开发。一个一致的，真实的世界级项目。理想状态下，软件由技术专家构建。这是真的，至少在大部分时间。

那我们如何获得这样的项目呢？好的消息是Eric Simons先生已经创建了真实的项目，就是一个中型博客。这个项目已经实现了相同的HTML结构，CSS和API规范，但是前端使用了不同的库和框架。

我在ClojureScript中开发了一个功能实现，后来又做了重新构建，我不认为自己是专家。感谢我的团队中的专家Review我的代码。

关于性能的基准，我们需要使用以下指标来进行实际测试。包括如下指标：

1.性能

这个App需要启动多久可用，多长时间显示出内容？

2.大小

这个App安装包有多大，安装后占用多少空间？
我们只比较编译后的JavaScript。CSS是通用的变体，并从CDN下载。HTML页面也是一样通用，所有技术都经过编译或转换成JavaScript，所以只需要调整这个文件。

3.代码行数

开发者用了多少行代码来开发一个基于规范的实装应用程序？坦白讲，一些应用的开发者的开发目录比较混乱，但对于编译后应该没有太大影响。我的源代码只有一个src目录。

在撰写本文时（截止到2017年12月），参与评测的前端主流框架包括如下（21CTO注：因为微信公众号不能加外部链接，我们附于软件名称后）：

React / Reduc
https://github.com/gothinkster/react-redux-realworld-example-app

Elm
https://github.com/rtfeldman/elm-spa-example

Augular 4+
https://github.com/gothinkster/angular-realworld-example-app

Augular 1.5+
https://github.com/gothinkster/angularjs-realworld-example-app

React / MobX
https://github.com/gothinkster/react-mobx-realworld-example-app

Crizmas MVC
https://github.com/gothinkster/crizmas-mvc-realworld-example-app

CLSJ Keechma
https://github.com/gothinkster/clojurescript-keechma-realworld-example-app

AppRun
https://github.com/gothinkster/apprun-realworld-example-app

度量标准1：性能

使用Chrome 自带的LighthouseAudit 进行渲染测试。越早渲染，使用该应用的用户体验越好。Light也是进行第一次互动，这和大部分应用是相通的。

度量标准2：大小

传输大小来自Chrome网络标签。由服务器端返回GZip压缩增强响应头以及正文。
越小的文件，代表更快的下载和较小的解析。
这些都依赖于前端框架的尺寸，所有增加的额外依赖关系，告诉如何使用构建工具做一个小的捆绑。

传输尺寸（KB）-越小越好

度量指标3：代码行数

如果调试是去除软件错误的过程，那么编程必须是把它们加入的过程。

- Edsger Dijkstra

我们使用开源工具cloc来计算每个repo仓库中src目录中的代码行数。空白和注释不会被计算在内。

这样做有什么意义？

因为代码行数越少，发生错误的可能性越小，代码维护复杂度越低。

框架代码行数排行 – 越少越好
小结

关于性能

以上是真实框架在实际项目中的表现，并非使用基准测试工具的比较。这些应用程序都托管在Github上，可能和你的测试结果稍有不同，这样也没什么问题。

每个应用执行几次测试，然后四舍五入取平均值。

可以看到大多数的库和框架都在优秀和良好的范围之内，性能方面并没有特别大的差异。

关于尺寸

每个应用包的大小其实相差不大。我们也在比较类似的实现，查看捆绑包的大小。Apprun有点让我不可思议。在代码行方面，Elm的工作表现非常出色。

AppRun的包大小只有18.7K

代码行数

这对我们开发者来说影响比较大。代码行数越多，需要维护的内容也会增多，这需要一个平衡。特别是涉及到强类型与动态语言。强类型语言给我们更多的安全和开销，需要声明更多的类型。

强类型与动态语言

强类型：Elm，Angular 4+与AppRun
动态：React| Redux，Angular 1.5 , React | MobX， Crizmas MVC , CLJS Keechma 与 CLJS re-frame。

哪一些更好？没有更好或更坏，它们之间有各自的特色。就像TDD（测试驱动开发）一样，有些人喜欢它，有的人则讨厌它。选择一个更适合自己的软件，用它来开发优秀的软件。

你也许会问，Vue，Preact， Ember，Svelte，Aurelia这些框架呢？好像他们没有在现在这些名单中，您不用担心，我们后面会再加入它们的评测。

最后总结一下，在真实的产品运行中，与评测是不尽相同的。我们的世界并不是完美无缺的。它和服务器负载、网络带宽/流量以及其它相关因素有关，导致数据有一些差别。