框架对比_2020 年前端框架性能对比和评测
我们又来做这个对比了。这次是 2020 年的版本,还有之前的版本: 2019 年、 2018 年、 2017 年。
先来明确一点——这篇文章绝对不是为了告诉你该选择哪个前端框架而写的。它只是一个小型而相对简单的评测,对比三个指标:以基本相同的应用程序为基础,评价不同框架制作出来的应用的性能、应用大小和代码行数。
记住这一点后,我们来看具体的评测方法:
- 我们对比的基础是 RealWorld 应用——这款应用不是简单的待办事项(to do)应用而已。常见的待办事项应用无法为实际的应用程序构建提供足够的知识和观点参考。
- 它在某种程度上是标准化的——这是一个符合特定规则的项目,有一套规范。项目还提供了后端 API、静态标记和样式。
- 它是由一位专家编写或审查的——这是一个一致的,真实世界的项目,其构建或审查工作有专家的参与。
我们要对比哪些库 / 框架?
在撰写本文时,在 RealWorld 存储库中有 24 种 Conduit 实现。框架是否流行并不重要。唯一的参评条件是——它出现在 RealWorld 仓库页面上。
![](/assets/blank.gif)
我们对比哪些指标?
- 性能——这款应用需要多长时间才能显示内容并处于可用状态?
- 大小——这款应用有多大?我们只会对比已编译的 JavaScript 文件的大小。HTML 和 CSS 对所有变体都是通用的,并且是从 CDN(内容交付网络)下载的。所有技术都可以编译或转译为 JavaScript,因此我们只看这个文件的大小。
- 代码行数——作者需要多少行代码才能基于规范创建出 RealWorld 应用?公平地讲,某些框架做出来的应用是有很多花边内容,但应该不会有什么重大影响。我们要量化的唯一文件夹是每个应用中的 src/。无论它是否是自动生成的都没关系——反正你都需要维护它的。
指标 1:性能
我们会检查 Chrome 随附的 Lighthouse Audit 的性能分数。Lighthouse 返回的性能分数在 0 到 100 之间。0 是最低的。更多详细信息,请参阅《Lighthouse 计分指南》。
测试设置
![](/assets/blank.gif)
基本原理
内容绘制得越快,用户就能越早开始做事,应用的使用体验就会越好。
![](/assets/blank.gif)
性能(0-100 点)——越高越好
注意:由于缺少演示应用,因此跳过了 PureScript。
结论
Lighthouse Audit 不会说谎。你可以看到在今年未维护 / 未更新的框架做出来的应用跌破 90 分大关。如果你的应用得分超过 90,表现应该不会有太大区别。具体来说,AppRun、Elm 和 Svelte 确实令人印象深刻。
指标 2:大小
传输大小数据来自 Chrome 的网络标签。服务器提供 GZIP 压缩后的响应标头以及响应正文。
这里的表现取决于框架的大小以及它添加的其他依赖项的多少。还能看出构建工具能否很好地去掉包中未使用的代码。
基本原理
文件越小,下载速度越快,并且需要解析的内容也更少。
![](/assets/blank.gif)
传输大小(KB)——越少越好
备注:由于缺少演示应用,因此跳过了 PureScript。
Angular+ngrx+nx:Angular+ngrx+nx 这里不要怪我看错了,请检查 Chrome 开发工具网络标签,如果我算错了请告诉我。
Rust+Yew+WebAssembly 还包括.wasm 文件
结论
Svelte 和 Stencil 社区所做的令人印象深刻的工作,将它们的应用体积压缩到了 20KB 以下,这确实是一项成就。
指标 3:代码行数
使用 cloc,我们可以计算每个存储库的 src 文件夹中的代码行数。空白行和注释行在这里都不算。为什么要考虑这个指标呢?
如果调试是消除软件错误的过程,那么编程肯定就是把错误放入软件的过程。 ——EdsgerDijkstra
基本原理
这个指标说明了给定库 / 框架 / 语言的简洁程度。也就是说根据规范,你需要多少行代码才能实现几乎相同的应用(其中一些有更多的花边部分)。
![](/assets/blank.gif)
代码行数——越少越好
备注:由于 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 存储库中该实现尚未完成,就这么简单。
关注我并转发此篇文章,私信我“领取资料”,即可免费获得InfoQ价值4999元迷你书!
框架对比_2020 年前端框架性能对比和评测相关推荐
- 谈谈新的前端框架 Svelte 和现代前端框架的特点
官方网址 https://svelte.dev/ 这个框架还是非常不错的,轻量级,代码量少,没有Virtual DOM高性能,涵盖了非常多的优点. 先来说说轻量级,通过CSS缩小后有约17kb的大小, ...
- php前端响应式框架,响应式css前端框架有哪些
响应式css前端框架有:1.Semantic UI Framework:2.Less Framework:3.Foundation Framework:4.UIkit Framework:5.YUI ...
- 浅谈 SAP UI5 框架对一些其他前端框架比如 Vue 的支持
我们都知道 Fiori 代表 SAP 新一代 UI 的界面风格,而 UI5 是 Fiori UX(User Experience,用户体验)的具体实现技术.从下图这则新闻 能够看出,SAP 决定将 F ...
- jquery属于html框架吗,jquery是前端框架吗?
jquery是前端框架吗? jquery不是前端框架,它是一个JavaScript库. 框架与库之间最本质区别在于控制权:you call libs, frameworks call you(控制反转 ...
- layuit 框架_Layui|经典模块化前端框架
"Layui"是一款采用自身模块规范编写的情怀型前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈 ...
- BUI框架使用步骤(前端框架)
一.介绍 BUI 是用来快速构建界面交互的UI框架, 专注webapp开发. 二.使用 官方文档: https://imouou.github.io/BUI-Guide/#/ https://www. ...
- php开发前端的框架有哪些,网站的一些前端框架有哪些?4个前端框架对比
网站的一些前端框架有哪些?前端框架主要是为了简化网站设计的框架,现在前端框架有很多种,下面php中文网就为您总结一下前端框架对比. 目前前端框架有很多种,但是使用最多的也就几种,并且每一个框架都会有自 ...
- 2017前端框架何去何从
>这篇文章将从 AngularJS ReactJS Polymer 这几个流行的框架入手,分析前端框架在这几年发展中的关键技术点,作为2015前端技术选型的参考.摘要: - 初体验 - 技术特点 ...
- p40与p100训练性能对比
深度学习训练,选择P100就对了 原文:https://yq.aliyun.com/articles/238764 摘要: 本文使用NVCaffe.MXNet.TensorFlow三个主流开源深度学习 ...
最新文章
- 2021人工智能年度评选结果揭晓!AI落地最佳参考在此奉上
- 设备驱动--中断开关执行的匹配
- 【Python学习系列二十七】pearson相关系数计算
- 在线实时大数据平台Storm输入源共享试验
- top99 slam
- 从淘特升级,看电商特别模式的特别价值
- NYOJ 215 Sum
- 一个Android开发者开博一周年的成长日记——送给不知如何下手的【初级开发者】和【在校生】...
- poj 2513 Colored Sticks
- java quartz 2.2.3_java – Spring 3 Quartz 2错误
- 我与OTC的诸位大神
- B站后台源码疑似泄露,作为程序员我们得注意哪些?
- buuctf misc部分wp
- OSChina 周三乱弹 —— 你们谁给我把盖扣上
- Windows利用系统自带的Dism命令挂载wim文件
- 因为洋红色被告垄断,德国电信心塞
- 【iOS】网络操作与AFNetworking
- 输入虚拟手机服务器地址,输入服务器url地址
- MATLAB-样条插值运算
- http协议入门之Content-Disposition
热门文章
- 机器视觉:系统不稳定性因素分析
- Python 爬虫-进阶开发之路
- 2018-06-13 第三十八天
- ORACLE LINUX 6.3 + ORACLE 11.2.0.3 RAC + VBOX安装文档
- SecureCRT 6.7.0.153 汉化绿色版
- 二维码_encode与decode
- 2016年北京hadoop in china见闻
- OpenGL--------纹理处理
- Eclipse Tips(1):增强智能感知
- php饼图只有一个小方块_如何用Python画一个好看的饼图