写点什么

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

  • 2020-03-20
  • 本文字数:2240 字

    阅读完需:约 7 分钟

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

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


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


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


  • 我们对比的基础是 RealWorld 应用——这款应用不是简单的待办事项(to do)应用而已。常见的待办事项应用无法为实际的应用程序构建提供足够的知识和观点参考。

  • 它在某种程度上是标准化的——这是一个符合特定规则的项目,有一套规范。项目还提供了后端 API、静态标记和样式。

  • 它是由一位专家编写或审查的——这是一个一致的,真实世界的项目,其构建或审查工作有专家的参与。

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

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


我们对比哪些指标?

  • 性能——这款应用需要多长时间才能显示内容并处于可用状态?

  • 大小——这款应用有多大?我们只会对比已编译的 JavaScript 文件的大小。HTML 和 CSS 对所有变体都是通用的,并且是从 CDN(内容交付网络)下载的。所有技术都可以编译或转译为 JavaScript,因此我们只看这个文件的大小。

  • 代码行数——作者需要多少行代码才能基于规范创建出 RealWorld 应用?公平地讲,某些框架做出来的应用是有很多花边内容,但应该不会有什么重大影响。我们要量化的唯一文件夹是每个应用中的 src/。无论它是否是自动生成的都没关系——反正你都需要维护它的。

指标 1:性能

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

测试设置

基本原理

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



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


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

结论

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

指标 2:大小

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


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

基本原理

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



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


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


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


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

结论

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

指标 3:代码行数

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


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

基本原理

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



代码行数——越少越好


备注:由于 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 存储库中该实现尚未完成,就这么简单。

英文原文

A Realworld Comparison of Front End Framworks 2020


2020-03-20 16:4410549
用户头像
小智 让所有人认同的文字称不上表达

发布了 408 篇内容, 共 399.8 次阅读, 收获喜欢 1985 次。

关注

评论 8 条评论

发布
用户头像
有理有据,我还是选 Angular 一把梭。
2020-04-04 09:35
回复
用户头像
react 为什么后面要接个redux,你故意的吧
2020-03-30 18:07
回复
用户头像
为什么不测Flutter for web
2020-03-30 10:58
回复
用户头像
Angular虽然排第一(倒数),但是我还会使用它。
2020-03-28 19:16
回复
用户头像
所以结论是Vue、React、Angular里边Vue是最好的
2020-03-20 17:58
回复
一直都认为vue是三个里面最好的,就搞不懂为啥那么多公司用react 0.0
2020-03-28 20:11
回复
vue和react都用,各有各的好,印象最深的是react能实现我各种天马行空的想法
2020-03-30 11:29
回复
怎么看出来最好的,就算是上面的指标,代码行数 react+redux/mobx 在 vue 前面,这个对比本身就有点问题,vue 有没有加 vuex,为啥 react 不能用 local state.
2020-04-04 18:40
回复
没有更多了
发现更多内容

全能解压 mac版 Dr Unarchiver for Mac中文下载

Rose

Mac软件 解压软件 Dr Unarchiver

Mac平台上的强大软件卸载工具:AppDelete中文直装版

Rose

软件卸载工具 Mac卸载软件 苹果电脑软件下载 AppDelete

NOT IN子查询中出现NULL值对结果的影响你注意到了吗

GreatSQL

完美兼容M芯片 Omi NTFS磁盘管理助手下载 NTFS Disk by Omi NTFS Mac

Rose

NTFS Disk by Omi NTFS NTFS 磁盘管理器 ntfs

JetBrains DataGrip 2020 编程开发软件 中文无限试用版 兼容m1

Rose

编程 软件 开发

TIKV 源码学习笔记--BatchSystem 创建初始化流程

TiDB 社区干货传送门

TiDB 底层架构 TiKV 源码解读 TiKV 底层架构

生成式 AI 术语指南:带有配图说明,没有数学公式

Baihai IDP

程序员 AI AIGC 白海科技 GenAI

国际领先!天翼云驭“数”有道!

天翼云开发者社区

云计算 大数据 云平台

记录一次Region is Unavailable问题的排查

TiDB 社区干货传送门

监控 性能调优 故障排查/诊断 6.x 实践

TIDB 行转列和列转行操作(附SQL实战)

TiDB 社区干货传送门

实践案例

TIKV BatchSystem 概述

TiDB 社区干货传送门

TiDB 底层架构

什么是数字化工厂?数字化工厂的整体架构是什么?

万界星空科技

数字化 mes 数字化工厂 万界星空科技

Mac 上最好用的 Open 客户端 Viscosity永久激活版 兼容m

Rose

Viscosity mac下载 Open 客户端 Viscosity mac破解

MAMP Pro 6.8.1 Mac永久破解版 Web开发环境 兼容m1

Rose

编程开发 Mac软件 Web开发环境 MAMP PRO激活码 MAMP Pro安装教程

支持M2/M3 macbook高效率工具:Alfred 5汉化包下载

Rose

mac效率工具 Alfred 5破解版 Alfred 中文 Alfred下载

2024年3月最新注册Chatgpt教程,国内可用,无需手机号!

蓉蓉

GPT-4 ChatGPT4

基于信通院混沌测试工具databench-c对TiDB数据库进行混沌测试

TiDB 社区干货传送门

实践案例 性能测评

RESP破解版下载 Redis桌面管理工具 Mac软件下载

Rose

Mac软件 RESP破解版 Redis桌面管理工具

Matlab r2023a 破解版 安装激活教程 含Matlab许可证文件安装密钥

Rose

数学软件 MATLAB R2023a MATLAB安装秘钥

非遗之美与科技之力的碰撞,易开得谱写一首《定军山》

脑极体

MySQL的JOIN到底是怎么玩的

派大星

:MySQL 数据库 互联网大厂

TIKV 源码学习笔记--分布式事务接口 Commit/Rollback

TiDB 社区干货传送门

TiDB 底层架构 TiKV 源码解读 TiKV 底层架构

TIKV 源码学习笔记--分布式事务接口 CheckTxnStatus/ ResolveLock

TiDB 社区干货传送门

TiDB 底层架构

一文了解TiDB的执行计划绑定功能

TiDB 社区干货传送门

性能调优 实践案例

DaVinci Resolve Studio 16 mac达芬奇调色剪辑软件 附注册密钥

Rose

DaVinci Resolve 破解 达芬奇调色软件 达芬奇安装秘钥

【中文无限试用版】intellij idea 2020下载 最好用的Java开发工具 兼容m1

Rose

IntelliJ IDEA激活码 intellij idea 下载 intellij idea 中文 intellij idea 2020破解版

HTTP/3:全面剖析

Apifox

前端 后端 HTTP http3 HTTP/3

TIKV 源码学习笔记--分布式事务接口 Prewrite

TiDB 社区干货传送门

开发语言 TiDB 底层架构 TiKV 源码解读 TiKV 底层架构

2020年前端框架性能对比和评测_大前端_Jacek Schae_InfoQ精选文章