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

在近几年的发展中,前端技术特别是前端框架有着爆炸式的增长。它们每一个都能够构建伟大的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目录。

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这些框架呢?好像他们没有在现在这些名单中,您不用担心,我们后面会再加入它们的评测。

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

原文:https://medium.freecodecamp.org/a-real-world-comparison-of-front-end-frameworks-with-benchmarks-e1cb62fd526c

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171220G0S46D00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动