您当前的位置:首页 > 电脑百科 > 程序开发 > 框架

2020 年前端框架性能对比和评测

时间:2020-06-10 17:37:17  来源:  作者:



我们又来做这个对比了。这次是 2020 年的版本,还有之前的版本: 2019 年、 2018 年、 2017 年。

先来明确一点——这篇文章绝对不是为了告诉你该选择哪个前端框架而写的。它只是一个小型而相对简单的评测,对比三个指标:以基本相同的应用程序为基础,评价不同框架制作出来的应用的性能、应用大小和代码行数。

记住这一点后,我们来看具体的评测方法:

  • 我们对比的基础是 RealWorld 应用——这款应用不是简单的待办事项(to do)应用而已。常见的待办事项应用无法为实际的应用程序构建提供足够的知识和观点参考。
  • 它在某种程度上是标准化的——这是一个符合特定规则的项目,有一套规范。项目还提供了后端 API、静态标记和样式。
  • 它是由一位专家编写或审查的——这是一个一致的,真实世界的项目,其构建或审查工作有专家的参与。

我们要对比哪些库 / 框架?

在撰写本文时,在 RealWorld 存储库中有 24 种 Conduit 实现。框架是否流行并不重要。唯一的参评条件是——它出现在 RealWorld 仓库页面上。

2020 年前端框架性能对比和评测

 

我们对比哪些指标?

  • 性能——这款应用需要多长时间才能显示内容并处于可用状态?
  • 大小——这款应用有多大?我们只会对比已编译的 JAVAScript 文件的大小。htmlcss 对所有变体都是通用的,并且是从 CDN(内容交付网络)下载的。所有技术都可以编译或转译为 JavaScript,因此我们只看这个文件的大小。
  • 代码行数——作者需要多少行代码才能基于规范创建出 RealWorld 应用?公平地讲,某些框架做出来的应用是有很多花边内容,但应该不会有什么重大影响。我们要量化的唯一文件夹是每个应用中的 src/。无论它是否是自动生成的都没关系——反正你都需要维护它的。

指标 1:性能

我们会检查 Chrome 随附的 Lighthouse Audit 的性能分数。Lighthouse 返回的性能分数在 0 到 100 之间。0 是最低的。更多详细信息,请参阅《Lighthouse 计分指南》。

测试设置

2020 年前端框架性能对比和评测

 

基本原理

内容绘制得越快,用户就能越早开始做事,应用的使用体验就会越好。

2020 年前端框架性能对比和评测

 

性能(0-100 点)——越高越好

注意:由于缺少演示应用,因此跳过了 PureScript。

结论

Lighthouse Audit 不会说谎。你可以看到在今年未维护 / 未更新的框架做出来的应用跌破 90 分大关。如果你的应用得分超过 90,表现应该不会有太大区别。具体来说,AppRun、Elm 和 Svelte 确实令人印象深刻。

指标 2:大小

传输大小数据来自 Chrome 的网络标签。服务器提供 GZIP 压缩后的响应标头以及响应正文。

这里的表现取决于框架的大小以及它添加的其他依赖项的多少。还能看出构建工具能否很好地去掉包中未使用的代码。

基本原理

文件越小,下载速度越快,并且需要解析的内容也更少。

2020 年前端框架性能对比和评测

 

传输大小(KB)——越少越好

备注:由于缺少演示应用,因此跳过了 PureScript。

Angular+ngrx+nx:Angular+ngrx+nx 这里不要怪我看错了,请检查 Chrome 开发工具网络标签,如果我算错了请告诉我。

Rust+Yew+WebAssembly 还包括.wasm 文件

结论

Svelte 和 Stencil 社区所做的令人印象深刻的工作,将它们的应用体积压缩到了 20KB 以下,这确实是一项成就。

指标 3:代码行数

使用 cloc,我们可以计算每个存储库的 src 文件夹中的代码行数。空白行和注释行在这里都不算。为什么要考虑这个指标呢?

如果调试是消除软件错误的过程,那么编程肯定就是把错误放入软件的过程。 ——EdsgerDijkstra

基本原理

这个指标说明了给定库 / 框架 / 语言的简洁程度。也就是说根据规范,你需要多少行代码才能实现几乎相同的应用(其中一些有更多的花边部分)。

2020 年前端框架性能对比和评测

 

代码行数——越少越好

备注:由于 cloc 无法处理.svelte 文件,因此 Svelte 被跳过。

由于 cloc 无法处理.riot 文件,因此跳过了 
riotjs-effector-universal-hot。

Angular+ngrx:使用 /libs 文件夹完成的 LoC 计算仅包括.ts 和.html 文件。如果你认为这是错误的方法,请告诉我正确的数字应该是多少,以及如何计算它。

结论

只有 Imba 和带 re-frame 的 ClojureScript 才能在 1000 行代码内实现这个应用。Clojure 以非同一般的表达方式而著称。Imba 第一次出现在这里(去年的时候 cloc 无法分析.imba 文件格式),看起来它的地位会持续下去。如果你关心自己的 LoC,那么看到这里你就该知道选什么了。

总结

请记住,这并不是完全公平的对比。有些实现使用了代码拆分,有些则没有。其中有些托管在 GitHub 上,有些托管在 Now 上,还有些托管在 Netlify 上。你还是想知道哪一个框架最好?这个问题就留给你自己来思考吧。

常见问题

1. 为什么评测中不包含框架 X,Y 和 Z?

因为在 RealWorld 仓库中尚未完成实现。你可以考虑做出贡献!用你喜欢的库 / 框架实现这个方案,我们下次将测试它的!

2. 你为什么叫它 " 真实世界 "?

因为它不只是一个待办事项应用。在 RealWorld 中,我们并不是要对比薪水、维护、生产力和学习曲线等。其他一些调查可以回答其中的一些问题。我们所说的 RealWorld 是一个连接到服务器,进行身份验证并允许用户 CRUD 的应用程序,就像真实世界中的应用程序一样。

3. 你为什么不测试我最喜欢的框架?

请参见上面的 #1,但以防万一再提一句:因为在 RealWorld 存储库中该实现尚未完成。我并没有完成所有的实现——这需要社区的努力。如果你想在对比中看到你的框架,请考虑做出贡献。

4. 你测试的是哪个版本的库 / 框架?

在撰写本文时(2020 年 3 月)可用的版本。这里的信息来自 RealWorld 仓库。你可以在 GitHub 存储库中找到相关数据。

5. 为什么你忘了测试一个比较流行的框架?

同样,请参阅 #1 和 #3。在 RealWorld 存储库中该实现尚未完成,就这么简单。



Tags:前端框架   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
CSS框架提供了设计一致解决方案的基本结构,以解决前端web开发中的常见问题。它们提供了通用功能,可以针对特定场景和应用程序进行覆盖。这大大减少了开始创建应用程序和网站所...【详细内容】
2021-12-06  Tags: 前端框架  点击:(15)  评论:(0)  加入收藏
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个由百度开源的低代码前端框架——amis...【详细内容】
2021-11-05  Tags: 前端框架  点击:(68)  评论:(0)  加入收藏
每个前端开发人员都听说过三个用于构建 Web 应用程序的框架:React、Vue.js和Angular。React 是一个 UI 库,Angular 是一个成熟的前端框架,而 Vue.js 是一个渐进式框架。它们几...【详细内容】
2021-08-25  Tags: 前端框架  点击:(96)  评论:(0)  加入收藏
1、D2admin开源地址: https://github.com/d2-projects/d2-admin文档地址: https://d2.pub/zh/doc/d2-admin/效果预览: https://d2.pub/d2-admin/preview/#/index开源协议:MITima...【详细内容】
2021-07-13  Tags: 前端框架  点击:(128)  评论:(0)  加入收藏
业务背景目前团队内的开发模式多是面向组件的,UI层和逻辑层均强耦合在一起,由于业务的差异性,往往很难完全复用。 闲鱼前端业务处在高速发展不断尝试的阶段,如何能更快更稳定地...【详细内容】
2021-04-09  Tags: 前端框架  点击:(271)  评论:(0)  加入收藏
本文作者 : Stanley 罗昊本文转自: https://www.cnblogs.com/StanleyBlogs/p/14480990.html下载Layui与文件分析下载直接去官网下载即可 文件分析下载完成后,解压会得到一个文...【详细内容】
2021-03-09  Tags: 前端框架  点击:(220)  评论:(0)  加入收藏
尝试了很多不同的前端框架,最终我们选择Vuetify(https://vuetifyjs.com)前端框架。从Bootstrap开始,到iview,Buefy,elementUI,我们都是不断的尝试了多种不同的前端Vue框架,最终选择V...【详细内容】
2020-10-10  Tags: 前端框架  点击:(143)  评论:(0)  加入收藏
起初,按照惯例,先在Vue.js官网上看了相关文档介绍及基础使用。 接着在某站上看了某马实战教程,相关环境已准备好,开开心心的在cmd中输入 vue ui,直觉告诉我,事情没那么简单,果然后...【详细内容】
2020-07-14  Tags: 前端框架  点击:(94)  评论:(0)  加入收藏
ZUI一个基于 Bootstrap 深度定制开源前端实践方案,帮助你快速构建现代跨屏应用。Bootstrap是非常优秀的前端框架,但在构建大型应用的开发时通常远远不够。如果Bootstrap能够完...【详细内容】
2020-06-24  Tags: 前端框架  点击:(82)  评论:(0)  加入收藏
我们又来做这个对比了。这次是 2020 年的版本,还有之前的版本: 2019 年、 2018 年、 2017 年。先来明确一点——这篇文章绝对不是为了告诉你该选择哪个前端框架而...【详细内容】
2020-06-10  Tags: 前端框架  点击:(69)  评论:(0)  加入收藏
▌简易百科推荐
近日只是为了想尽办法为 Flask 实现 Swagger UI 文档功能,基本上要让 Flask 配合 Flasgger, 所以写了篇 Flask 应用集成 Swagger UI 。然而不断的 Google 过程中偶然间发现了...【详细内容】
2021-12-23  Python阿杰    Tags:FastAPI   点击:(6)  评论:(0)  加入收藏
文章目录1、Quartz1.1 引入依赖<dependency> <groupId>org.quartz-scheduler</groupId> <artifactId>quartz</artifactId> <version>2.3.2</version></dependency>...【详细内容】
2021-12-22  java老人头    Tags:框架   点击:(12)  评论:(0)  加入收藏
今天来梳理下 Spring 的整体脉络啦,为后面的文章做个铺垫~后面几篇文章应该会讲讲这些内容啦 Spring AOP 插件 (了好久都忘了 ) 分享下 4ye 在项目中利用 AOP + MybatisPlus 对...【详细内容】
2021-12-07  Java4ye    Tags:Spring   点击:(14)  评论:(0)  加入收藏
&emsp;前面通过入门案例介绍,我们发现在SpringSecurity中如果我们没有使用自定义的登录界面,那么SpringSecurity会给我们提供一个系统登录界面。但真实项目中我们一般都会使用...【详细内容】
2021-12-06  波哥带你学Java    Tags:SpringSecurity   点击:(18)  评论:(0)  加入收藏
React 简介 React 基本使用<div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js...【详细内容】
2021-11-30  清闲的帆船先生    Tags:框架   点击:(19)  评论:(0)  加入收藏
流水线(Pipeline)是把一个重复的过程分解为若干个子过程,使每个子过程与其他子过程并行进行的技术。本文主要介绍了诞生于云原生时代的流水线框架 Argo。 什么是流水线?在计算机...【详细内容】
2021-11-30  叼着猫的鱼    Tags:框架   点击:(21)  评论:(0)  加入收藏
TKinterThinter 是标准的python包,你可以在linx,macos,windows上使用它,你不需要安装它,因为它是python自带的扩展包。 它采用TCL的控制接口,你可以非常方便地写出图形界面,如...【详细内容】
2021-11-30    梦回故里归来  Tags:框架   点击:(27)  评论:(0)  加入收藏
前言项目中的配置文件会有密码的存在,例如数据库的密码、邮箱的密码、FTP的密码等。配置的密码以明文的方式暴露,并不是一种安全的方式,特别是大型项目的生产环境中,因为配置文...【详细内容】
2021-11-17  充满元气的java爱好者  博客园  Tags:SpringBoot   点击:(25)  评论:(0)  加入收藏
一、搭建环境1、创建数据库表和表结构create table account(id INT identity(1,1) primary key,name varchar(20),[money] DECIMAL2、创建maven的工程SSM,在pom.xml文件引入...【详细内容】
2021-11-11  AT小白在线中  搜狐号  Tags:开发框架   点击:(29)  评论:(0)  加入收藏
SpringBoot开发的物联网通信平台系统项目功能模块 功能 说明 MQTT 1.SSL支持 2.集群化部署时暂不支持retain&will类型消 UDP ...【详细内容】
2021-11-05  小程序建站    Tags:SpringBoot   点击:(56)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条