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

2023-05-27 0 792

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目录。

在撰写本文时(截止到2017年12月),参

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也是展开第一次互动,这和绝大部分应用领域是相通的。

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

度量标准2:大小不一

传输大小不一来自Chrome网络标签。由伺服器端返回GZip压缩增强响应头以及正文。

越小的文件,代表更快的下载和较小的解析。

这些都依赖于后端架构的尺寸,所有增加的额外依赖关系,告诉怎样选用构筑工具做两个小的捆绑。

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

传输尺寸(KB)-越小越好

度量分项3:标识符行数

如果调试是去除应用领域软件错误的过程,所以编程必须是把它加入的过程。

– Edsger Dijkstra

他们选用开源工具cloc来计算每个repo仓库中src目录中的标识符行数。空白和注释不会被计算在内。

这种做有什么象征意义?

因为标识符行数越少,发生错误的可能性越小,标识符维护复杂度越低。

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

架构标识符行数排行 – 越少越好

小结

有关操控性

以上是真实世界架构在前述工程项目中的表现,并非选用计算方法试验工具的较为。这些应用领域程序都代销在Github上,可能和你的试验结果稍有相同,这种也没什么问题。

每个应用领域执行几次试验,然后四舍五入取平均值。

可以看到大多数的库和架构都在优秀和良好的范围之内,操控性方面并没有不光大的差异。

有关尺寸

每个应用领域包的大小不一其实相差不大。他们也在较为类似的同时实现,查看捆绑包的大小不一。Apprun有点让我不可思议。在标识符行方面,Elm的工作表现非常出色。

2017主流前端框架之实际性能对比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

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

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务