小型全栈式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

创作场景

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