写点什么

前端框架基准测试最新结果:18 个框架当中有 13 个达到顶级

  • 2019-04-26
  • 本文字数:1459 字

    阅读完需:约 5 分钟

前端框架基准测试最新结果:18个框架当中有13个达到顶级

小型全栈式 App RealWorld Conduit 最近更新了其基准测试结果。这款 App 分别采用 18 个不同的前端框架构建,并对它们进行了比较。结果显示,18 个框架当中有 13 个获得了顶级的 LightHouse 的分数(也就是在总分 100 分的情况下获得 90 以上)。在这 18 个框架当中,Svelte、Stencil、AppRun、Dojo、HyperApp 和 Elm 的网络传输负载最低(低于 30KB)。


自称为”演示 App 之母“的 Conduit 是对 Medium.com 的全栈式克隆,采用了一组API规范,并带有具备真实世界复杂性的功能。RealWorld项目核心维护者 Eric Simons 解释说:


它就像是TodoMVC,只是使用全栈技术实现。RealWorld 向大家展示了如何使用 React/Angular 等框架在 Node/Django 等平台上构建真实的博客平台。开发者可以把它们混合起来,因为它们都遵循相同的 API 规范。


RealWorld 基准测试始于 2017 年,最近更新了针对使用 18 个不同前端框架实现的 Conduit 的评估结果。2019 年的基准测试排名主要关注这三个方面:性能、大小和代码量。


性能分数是通过LightHouse来评估的。LightHouse 是一个非常流行的用于改进 Web 质量的自动化工具。LightHouse 对性能、可访问性和渐进式 Web App 进行审计,并基于六个加权指标给出性能评估分数。这六个指标按照重要程度排序如下:


  • TTI(Time to Interactive):让一个页面变得可交互需要多长时间。

  • 速度指数(Speed Index):页面处理内容的速度,分数越低也好。

  • FCP(First Contentful Paint):从导航一个页面到浏览器开始渲染 DOM 第一个字节的时间。

  • FCI(First CPU Idle):页面达到最小化可交互的时间(不需要等到页面上的所有元素都可交互,只要可以对大部分用户输入做出响应即可)。

  • FMP(First Meaningful Paint):用户感知到页面主要内容可见的时间。

  • 预估的输入延迟(Estimated Input Latency)。


LightHouse 将性能分数分为三组。90 到 100 分为顶级,表示性能最好的网站。在 RealWorld 基准测试中,大部分(18 个中有 13 个)Conduit 实现属于这一组。前 13 个框架中包括已经很成熟的框架(如 Elm、Dojo、Vue、Angular、Aurelia、Stencil、Svelte 和 React)、简约型框架(如 AppRun、Hyperapp)、较少被使用的框架(如 Crizmas 或 reframe)以及可编译成 JavaScript 的框架 Imba。


这 18 种 Conduit 实现也根据大小进行了排名。基准测试作者详细介绍了这一标准背后的原理及其计算方法:


传输大小是从 Chrome 开发者工具的 Network 页面获得的,包括 GZip 压缩的响应头和响应体……文件越小下载就越快,需要解析的东西就越少。


在性能最好的 13 个框架中,有 6 个(Svelte、Stencil、AppRun、Dojo、HyperApp 和 Elm)的传输大小小于 30KB:



他们通过k-means聚类算法将 18 个框架的传输大小分为 5 类。


框架的特点可以用来解释为什么它们的传输大小可以达到这么小:


  • Svelte 自称为”神奇的即逝 UI 框架“,将 API 编译成最优化的 JavaScript。

  • Stencil 的运行时只有 6KB,并可以编译成 Web 组件。

  • AppRun 和 HyperApp 的体积非常小(分别为 3KB 和 1KB)。

  • Dojo 最近推出了自动代码拆分特性,并针对 PRPL 性能模式进行了优化。

  • Elm 0.19 针对资产文件进行了优化。


前端框架的繁荣促成了基准测试的流行,这些基准测试旨在通过各种有意义的方式对框架进行比较。基准测试涉及的框架可能是各种各样的,具体取决于要比较哪些方面的内容、基准测试的方法和相关性以及分数的算法。但是,在选择前端框架时,还是要进行全盘考虑,包括质量和数量方面的指标。


查看英文原文Benchmark Ranks 18 Front-End Frameworks Implementation of Medium.com Clone


2019-04-26 09:288527
用户头像

发布了 731 篇内容, 共 468.6 次阅读, 收获喜欢 2006 次。

关注

评论 2 条评论

发布
用户头像
佩服兄弟666啊,来我们公司吧,在泰国,收入大几万,邀请你来v我TH0631280401
2019-04-27 17:15
回复
东南亚程序猿骗局?
2019-05-13 18:35
回复
没有更多了
发现更多内容

天猫商品详情API:深度挖掘商品推荐与关联的新路径

代码忍者

API 接口 API 测试

机器人测试自动化智能化交流沙龙 —免费参与,线上线下同步进行

测试人

软件测试

简历,需要和求职岗位匹配

老张

裁员 职场成长 求职面试

大数据处理与智慧营销系统性能优化

鲸品堂

大数据 营销 流程化 企业号2024年8月PK榜

如何做好API安全

德迅云安全杨德俊

6 个Spring tx 事务注解:4种隔离&7种事务传播业务案例(必须收藏)

肖哥弹架构

Java spring 注解

Parallels Desktop 19完美破解版 附PD虚拟机永久密钥

Rose

Parallels Desktop 19 Parallels虚拟机下载 Mac虚拟机安装 PD19密钥

香城档案利用 NocoBase 快速实现智能档案管理

NocoBase

低代码 无代码 档案管理

小小的引用计数,大大的性能考究

bin的技术小屋

Netty Java' netty

倒计时3天!数智时代下大数据应用的“道”与“术”闭门会议即将开幕

望繁信科技

数字化转型 流程挖掘 流程智能 智能化应用

天猫商品详情API:商品推荐与关联的获取

技术冰糖葫芦

API Explorer API 接口 API 测试 API 策略 pinduoduo API

揭示低代码与AI结合的商业价值

天津汇柏科技有限公司

人工智能 低代码

统一多场景自动编译加速

百度Geek说

编译器 百度飞桨

探索HarmonyOS位置服务:为用户提供直观的坐标显示

白晓明

HarmonyOS HarmonyOS NEXT 位置服务 地理编码转化 逆地理编码转化

扬帆蓝海,智起未来!和鲸科技助力第十三届全国海洋航行器设计与制作大赛智能感知赛道精彩收官!

ModelWhale

coconutBattery Plus:苹果mac电脑 电池健康检测工具

Rose

mac防火墙软件Radio Silence 完整激活版 支持M1/M2

Rose

身份管理“六边形战士”闪亮登场

芯盾时代

身份安全 iam 统一身份认证 身份和访问管理

如果提议者提议区块的时间晚了,会对见证有何影响?

TechubNews

LED单色显示屏未来发展的3个困难点

Dylan

技术 LED显示屏 全彩LED显示屏 led显示屏厂家 市场

fxfactory视觉特效下载 FxFactory 8 Pro mac破解资源

Rose

FxFactory Pro 8 fxfactory视觉特效

前端框架基准测试最新结果:18个框架当中有13个达到顶级_大前端_Bruno Couriol_InfoQ精选文章