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

Posted 2021-04-05 21CTO

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