说有相当多的 JS 框架可供选择，这完全是轻描淡写。
似乎每隔几个月就会有一个新的革命性框架进入生态系统，并承诺提供看不见的性能和/或易用性。
它已经到了我们几乎需要一个框架来选择我们的下一个框架（Yo Dawg）的地步。
虽然，对于开发人员来说，能够休假并回来而不必学习另一个框架，这将是一件好事，但我们也有点挖掘它。
新的框架通常会为 JS 生态系统带来创新。这可能与我们构建应用程序的方式和/或它们的性能有关。
这些性能改进有助于突破可能的界限——因此，也有助于激发其他框架实施类似的解决方案。
但是现在有一个有趣的问题——不同框架之间真的有那么大的性能差异吗？这是我们想要回答的问题。
然而，正如一句相当可怕的谚语所说：“给猫剥皮的方法不止一种”🙀
由于这篇文章的标题可能已经被剧透了，我们选择测试哪个框架在 SSR（服务器端渲染）方面是最快的。
结果很有趣，但就像一级方程式一样，通常是几毫秒就可以区分好与好。
但在我们进入细节之前，首先是一个非常大的免责声明。
🔔 免责声明 - 您的里程可能会有所不同！
正如任何曾经运行过任何类型的性能测试的人都可以告诉您的那样 - 结果可能会有所不同。您可以尽最大努力使条件尽可能一致，但仍然会得到不同的结果。
我们尝试将每个演示设置为与其他演示类似。但是，在我们当时不熟悉的一个特定框架中，可能有更好的方法来执行此操作。
如果您觉得有些事情可能会有所不同和/或更好，请发表评论或发送电子邮件至info@enterspeed.com。每个演示的源代码可以在我们的演示仓库中找到：https ://github.com/enterspeedhq/enterspeed-demos
认识 6 位参赛者
我们选择的 6 名参赛者混合了一些最流行的框架和一些较新、更受炒作的框架。
我们测试的框架是：
- Astro：Github 上的 18,2k 颗星，创建于 2021 年 3 月
- 盖茨比：Github 上的 53,4k 颗星，创建于 2015 年 5 月
- Next.js：Github 上的 91,8k 星，创建于 2016 年 10 月
- Nuxt 3：Github 上的 8,7k 颗星，创建于 2021 年 3 月
- 混音：Github 上的 19k 星，创建于 2020 年 10 月
- SvelteKit：Github 上 10.1k 星，创建于 2020 年 10 月
所有 6 个框架都是使用 SSR 设置的。
什么是 SSR？
SSR 代表 Server-Side Rendering，是一种将您的应用程序转换为服务器上的 HTML 的渲染策略。
其他一些渲染策略是：
- CSR - 客户端渲染，在浏览器中渲染。
- SSG - 静态站点生成，在构建时生成 HTML（因此只获取一次数据）。
- ISR - 增量静态再生，它是 SSG 和 SSR 的组合，允许您在构建站点后创建或更新静态页面。
与使用 CSR 呈现其内容的传统 SPA（单页应用程序）不同，SSR 提供了更快的“内容生成时间”并且更适合 SEO，因为爬虫将看到完全呈现的页面。
我们建造的
我们为每个框架复制的演示站点是一个包含 6 篇博文的漂亮博客。
它使用 Tailwind 进行样式设置，并从 Enterspeed（一种高性能数据存储）获取其内容。
额外信息 - 所有缩略图都是使用Dall-E 2生成的，带有以下短语：
- “一只猫驾驶一级方程式赛车数字艺术”
- “骆驼驾驶战斗机，像素艺术”
- “骑摩托车的酷无畏蜜蜂”
- “一只猎鹰以逼真的风格飞过外太空”
- “一个超越猎豹的人，数字艺术”
- “泰迪熊乘坐火箭的照片”
所有演示都是公开的并托管在 Netlify 上：
- 天文 - Enterspeed ♥ Astro
- 盖茨比 - Enterspeed ♥ Gatsby
- Next.js - Enterspeed ♥ Next
- Nuxt 3 - Enterspeed ♥ Nuxt
- 混音 - Enterspeed ♥ Remix
- SvelteKit - Enterspeed ♥ SvelteKit
可以在此处找到所有演示的 GitHub 存储库：https ://github.com/enterspeedhq/enterspeed-demos
我们测量了什么以及如何测量
为了测量我们的 JS 框架的 SSR 性能，我们使用了 Google Lighthouse（此处为 Web.dev/measure）。我们每次审计运行 5 次并计算每个指标的平均值。
💡 每个指标（和首字母缩写词）的解释将在下面进一步说明。
Google Lighthouse 测量核心 Web Vitals（LCP、FID、CLS），这已成为 Google 搜索算法中的排名因素，以及其他 Web Vitals（FCP、速度指数、TTI、TBT 和 CLS）。
我们没有测量 FID（首次输入延迟），因为这无法在实验室中测量。然而，TBT（总阻塞时间）与现场的 FID 有很好的相关性。
CLS（Cumulative Layout Shift）也不包含在结果中，因为所有演示都在该类别中得分为 0。
最后，我们想测量 TTFB（第一个字节的时间），因为它可以帮助测量与 SSR 高度相关的 Web 服务器响应能力。
为了测量 TTFB，我们使用了hey，我们向每个演示发送 250 个请求并测量平均 TTFB。
我们注意到，在向 Netlify 上的托管站点发送请求时，结果波动很大，因此我们选择在本地运行每个应用程序并以这种方式进行测量。
我们还选择将并发工作人员的数量从 50 个减少到仅 1 个，因为我们的 Nuxt 3 应用程序在发送多个请求时不断崩溃。
每个指标是什么意思？
所有指标（TTFB 除外）均基于 Google 的倡议：Web Vitals。Google 制定这些指标是为了为质量信号提供统一的指导。
✂️ 从Web.dev借来的解释
谷歌灯塔性能得分
Google Lighthouse 中的性能分数是 0 到 100 之间的分数。它是 Web Vitals 分数的加权平均值。每个 Web Vital 的权重如下：
- 第一次有内容的油漆：10%
- 速度指数：10%
- 最大含量涂料：25%
- 互动时间：10%
- 总阻塞时间：30%
- 累积布局转变：15%
绩效得分分为三类（差、需要改进和良好）：需要改进、
- 0 到 49（红色）：差
- 50 到 89（橙色）：需要改进
- 90 到 100（绿色）：好
注意：100 分的“完美”分数是极难达到的，也是意料之外的。
首次内容绘制 (FCP)
First Contentful Paint (FCP) 度量标准衡量从页面开始加载到页面内容的任何部分呈现在屏幕上的时间。
速度指数
速度指数衡量页面加载期间内容的视觉显示速度。
最大含量涂料 (LCP)
最大内容绘制 (LCP) 指标报告在视口中可见的最大图像或文本块的渲染时间，相对于页面首次开始加载的时间。
互动时间 (TTI)
TTI 指标衡量从页面开始加载到其主要子资源已加载的时间，并且它能够快速可靠地响应用户输入。
总阻塞时间 (TBT)
总阻塞时间 (TBT) 度量标准测量第一次内容绘制 (FCP) 和交互时间 (TTI) 之间的总时间量，其中主线程被阻塞足够长的时间以防止输入响应。
到第一个字节的时间 (TTFB)
TTFB 是衡量资源请求与响应的第一个字节开始到达之间的时间的度量。
结果
请打鼓……结果如下。
谷歌灯塔性能得分
1. 🏆 天文 - 99,2
SvelteKit - 99
Nuxt 3 和混音 - 98,8
Next.js - 98,6
盖茨比 - 95,6
首次内容绘制 (FCP)
1. 🏆 Astro、Gatsby 和 Remix - 0,8 秒
Next.js 和 SvelteKit - 0,9
努克斯特 3 - 1,1
速度指数
1. 🏆 SvelteKit - 2,3s
Astro & Remix - 2.8 秒
Nuxt 3 - 2,9s
Next.js - 3,2s
盖茨比 - 5,6s
最大含量涂料 (LCP)
1.🏆天文 - 0,8s
SvelteKit - 0,9s
Next.js，Nuxt 3，混音 - 1.2s
盖茨比 - 1,9s
互动时间 (TTI)
1.🏆天文 - 0,8s
SvelteKit - 1,0s
Nuxt 3 - 1,2s
混音和盖茨比 - 1,5 秒
Next.js - 1,7s
总阻塞时间 (TBT)
1.🏆天文 - 0ms
努克斯特 3 - 20 毫秒
盖茨比 - 28 毫秒
混音 - 30 毫秒
SvelteKit - 36 毫秒
Next.js - 54 毫秒
到第一个字节的时间 (TTFB)
1. 🏆 SvelteKit - 62 毫秒
Next.js - 63 毫秒
盖茨比 - 133 毫秒
混音 - 136 毫秒
天文 - 137 毫秒
努克斯特 - 438 毫秒
结论
现在，现在，在你开始烧毁这个地方之前，记住我们一开始所说的——你的里程可能会有所不同！
根据我们的结果，Astro 似乎确实是班上新的、快速的孩子——尽管在 TTFB 中没有那么多。
但是，TTFB 结果也可能是开发服务器没有从最好的一面展示自己。
SvelteKit 也取得了一些令人印象深刻的结果，也是在速度方面获得很多赞誉的新框架之一。
这是否意味着您应该跳过其他框架并选择这两个框架之一？绝对不。
每个框架都有其用例和好处。我们个人是 Next.js 提供的所有奇妙功能的忠实拥护者。
此外，许多人使用组合渲染策略，例如他们的主页使用 SSG，他们的博客页面使用 SSR/ISR，等等。
因此，请选择最适合您需求的框架。
🩸🔥 你的血还在沸腾，需要冷静吗？别担心，我们得到了你。
什么是 Enterspeed？🏎
Enterspeed是一种高性能数据存储，可通过组合您的服务来获得速度和灵活性。
将您的所有服务连接并组合到一个 API 端点中。使用我们的低代码编辑器轻松转换您的数据，以获得您所需要的 - 全部存储在我们超快的边缘网络中。
本文中使用 Enterspeed 为数据层（博客文章）提供了在所有测试中的高一致性性能。