AICon上海|与字节、阿里、腾讯等企业共同探索Agent 时代的落地应用 了解详情
写点什么

前端框架基准测试最新结果: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:288434
用户头像

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

关注

评论 2 条评论

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

Flutter 中的 JSON 解析,事件分发机制Android

android 程序员 移动开发

Flutter 仿掘金推特点赞按钮,kotlin中文版

android 程序员 移动开发

FART:ART环境下基于主动调用的自动化脱壳方案,androidndk开发教程

android 程序员 移动开发

Flutter Android 工程结构及应用层编译源码深入分析,Android面试题及答案2020

android 程序员 移动开发

下一代信息技术论坛云操作系统介绍

架构 操作系统

华云大咖说 | 安超DCM运维场景解决方案

华云数据

Dart _ 什么是Stream,安卓开发不得不会

android 程序员 移动开发

DateUtils(一个日期工具类),androidauto百度地图

android 程序员 移动开发

Flutter _ 日志还能这么打印,太秀了!,android移动应用基础教程

android 程序员 移动开发

Dart Flutter 1,flutter页面跳转动画

android 程序员 移动开发

ConstrainLayout 基础教程2,2021Android精选面试实战总结整理

android 程序员 移动开发

EventBus核心原理其实保存这三张图就可以弄懂了,收藏一下

android 程序员 移动开发

Flutter 与 Compose怎么选?小孩子才做选择,kotlinwindows桌面开发

android 程序员 移动开发

web技术分享| 一人一天一个可移植的实时聊天系统

anyRTC开发者

大前端 Web 音视频 实时通信 实时聊天

Context那些你不知道的事?,张口就来

android 程序员 移动开发

Coroutine 基本原理,Android开发大佬的百度美团快手等大厂Offer收割之旅

android 程序员 移动开发

DialogFragment探索与实现,音视频编解码技术

android 程序员 移动开发

Flutter 入门与实战(九),android软件开发前景

android 程序员 移动开发

Flutter Candies 一桶天下,kotlin编程软件

android 程序员 移动开发

Flutter RichText支持图片显示和自定义图片效果,经典Android开发教程

android 程序员 移动开发

Flutter 入门与实战(十三),安卓framework层开发

android 程序员 移动开发

Flutter 如何发布安卓应用?,flutter文档发布组件

android 程序员 移动开发

Flutter Android 端 FlutterInjector 及依赖流程源码分析

android 程序员 移动开发

Flutter 中的 JSON 解析(1),androidsdk环境配置

android 程序员 移动开发

Flutter 仿掘金微信图片滑动退出页面效果,写给程序员的Flutter详细教程

android 程序员 移动开发

Flutter 官方尝试放只“鸽子”来简化Native插件开发,复习指南

android 程序员 移动开发

filter、interceptor、aspect不知如何选择,移动应用开发案例教程

android 程序员 移动开发

ConstraintLayout 1,flutterrow换行

android 程序员 移动开发

ConstraintLayout 2,android双击事件响应

android 程序员 移动开发

Dart 层如何 兼容 Android 和iOS平台特性 (1),Android开发面试技巧

android 程序员 移动开发

如何打造实时性的弹窗?

神策技术社区

UI sdk Android;

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