最新的 web 框架性能报告出炉 _框架

文章插图

大家好，我是Echa 。
好消息，Astro 官网Blog 中 Fred Schott 大佬发文公布了 Web 框架性能报告清单，如何让前端开发者们更好的选择前端框架，以及相关性能和在Web 上整体运作流程和用户交互体验的关系。主要是从三个方面问题去分析：

现代流行的Web 框架在使用中和性能方面如何比较？
Web 框架的选择会直接影响到底层加载速度吗？
Web 框架和JAVAScript大小有直接关系吗？有什么影响？

全文大纲

数据来源
对比Web框架
前端性能分析
JavaScript 大小影响
报告总结

数据来源
web 框架性能报告主要从三个不同的公开数据收集而来的：

Chrome 用户体验报告 (CrUX) ：提供了有关证实 Chrome 用户如何体验 web 上热门应用的用户体验指标。
HTTP Archive：通过定期收集 Lighthouse 性能数据来跟踪和报告超过 1500 万个网站的性能。
Core Web Vitals 技术报告：从前两个数据集中收集了有用的见解。

所有数据均来自公共的、独立管理的数据集。在下面的部分中详细了解使用的方法。
对比Web框架
Fred Schott 大佬为了制作这份最新的 web 框架性能报告，就研究了六种现代流行的基于 JavaScript 的 Web 框架：Astro、Gatsby、Next.js、Nuxt、Remix和SvelteKit，进行多项指标的评测，另外，wordPress/ target=_blank class=infotextkey>WordPress 在网络上占据市场份额 (43.2%)，还尽可能包含了来自 WordPress 的数据，这样数据会更精准点。其中在研究所有使用特定框架构建的网站时，仅有 Astro 和 SvelteKit 超过了所有测试网站的平均通过率（40.5%）
Astro
官网地址：https://astro.build/
Github：https://github.com/withastro/astro
Astro 更详细的介绍，请见：Astro 2.0正式发布

文章插图

Gatsby
官网地址：https://www.gatsbyjs.com/
Github：https://github.com/gatsbyjs/gatsby

文章插图

Next.js
官网网址：https://nextjs.org/
Github：https://github.com/vercel/next.js
Next.js 更详细的介绍，请见：Next.js 13.2 正式发布

文章插图

Nuxt
官网地址：https://nuxt.com/
Github：https://github.com/nuxt/nuxt
Nuxt更详细的介绍，请见：Nuxt 3.2.0 正式发布

文章插图

Remix
官网地址：http://remix.run/
Github： https://github.com/remix-run

文章插图

SvelteKit
官网地址： https://svelte.dev/
Github： https://github.com/sveltejs/svelte

文章插图

google 的 Core Web Vitals (CWV) 是一组三个标准化指标，可帮助了解用户如何体验网页。每个指标衡量用户体验的不同方面——加载速度、响应能力、视觉稳定性，它们共同量化了网站的整体性能。
谷歌的 Core Web Vitals Assessment 是一项测试，它查看所有三个指标的真实用户测量数据（来自 CrUX 数据集），以确定每个网站的总体通过/未通过等级。一个网站要想通过，它必须在所有三个指标中都达到相关的“好”门槛。如果任何指标未达到阈值，则该网站未通过评估。