Angular、React 和 Vue：性能对比

作者：皮耶罗·博雷利✏️

在这个瞬息万变的科技世界里，有些工具经久不衰，而另一些则随着时间的流逝逐渐被人遗忘。然而，我们可以肯定的是，JavaScript 编程语言将会长期存在下去。

这项神奇的技术因其多功能性而受到数百万人的喜爱——它既可以部署在服务器端，也可以部署在客户端，可用于移动应用程序和桌面应用程序。

该语言的其他特点是能够从一开始就创建很棒的项目，而且其广泛的应用也使其非常有市场价值，对于那些想在这个领域找到第一份工作的人来说，它也极具吸引力。

但我们都知道，使用技术是有代价的。JavaScript 是一门相当复杂的语言，它的语法和特性都相当复杂。我承认，我曾多次看着一段 JS 代码，琢磨着它背后到底发生了什么。

而这正是技术发展史的重演之处：当许多人面临类似的问题时，解决方案便会涌现。人们运用集体智慧，寻找更高效的制造方法。就我们而言，我们开始创建名为“框架”的工具。

这些为我们的应用程序提供了框架，定义了开发项目的指导原则和最佳实践，同时简化了许多因素，例如代码结构和维护。

三种解决方案

尽管市面上涌现出数十个优秀的 JavaScript 框架，但本文仅聚焦于其中三个最流行的框架：Angular、React 和 Vue。我将重点关注它们的性能，帮助你理解性能在选择工具时所起的作用。

找到完美的

很多时候，当你开始一个新项目，却不知道该选择哪个框架时，你可能会忍不住想要随便选一个，而没有进行全面、正确的分析。但从长远来看，这可能会带来很多问题，因为你最终可能会发现，所选的框架并不能满足你的应用程序需求。

假设你不想了解这些框架在编码时的区别——没问题。但如果你有一个非常重要的项目，面临不同的瓶颈，并且你需要详细了解哪种技术在你的情况下表现更好，那该怎么办？

本文的目的在于：不仅向您快速介绍每个框架，而且还提供性能分析，帮助您做出最佳选择，从而指导您的选择并挑选出最适合您的框架。

请注意…

即使我们这里主要讨论的是性能，我仍然会先提供框架的总体概述。这样做是为了帮助您理解创建该框架的原因、它试图解决的具体问题子集以及它的总体优势。这些信息在稍后我们比较这三个框架时都会非常有用，以便您能够快速参考并做出选择。

角

在前端JS框架层出不穷、不断涌现的今天，Angular迅速确立了其主流技术的地位，并被数百万开发者所使用。这不仅归功于其恰逢其时的发布时机，更在于它提供了卓越的架构，包括便捷的双向数据绑定、MVC模型、内置模块系统、路由包以及依赖注入等功能。

总体表现亮点

由于采用了 MVC 架构，Angular 可以将任务拆分成逻辑块，从而缩短网页的初始加载时间。MVC 模型还实现了关注点分离，视图部分位于客户端，大幅减少了后台查询。此外，该工具采用异步通信模式，这意味着对服务器的调用次数更少。

一般优点

• 双向数据绑定： Angular 以简单、高效和直观的方式，将对模型所做的更改立即复制到视图中。
• Angular 广受欢迎且应用广泛： Angular 在该领域拥有很高的知名度，受到众多社区和专业人士的支持。

一般性

• 更重的应用：由于该框架具有许多功能，有时它们会给你的项目带来负担，所有这些都会导致应用更重、性能比 React 或 Vue 更慢。
• 持续更新：经常会引入新的、重大的变更。这可能会给开发人员在适应这些变更时带来问题。
• 学习曲线陡峭：由于其众多方面和功能，该框架的学习难度肯定比同类框架要高。

React

React 是一个前端库，用于创建有状态且可重用的 UI 组件。它允许开发者创建无需重新加载页面即可更改数据的大型 Web 应用程序。

它的主要目标是简洁、可扩展和快速。实际上，它是一个前端库，并没有完整地实现 MVC 模式——但你可以把它看作是 MVC 的视图部分。

总体表现亮点

使用 React 的另一个巨大优势是其卓越的性能。该库压缩后的文件大小仅为 43KB，凭借其惊人的速度和众多实现速度的功能（例如：）迅速而闻名。

• 使用虚拟 DOM： React 使用这项技术，它只在需要时重新渲染节点，从而实现最高效率。
• 支持捆绑和摇树优化：用于最大限度地减少最终用户的资源负载。
• 服务器端渲染 (SSR)： React 提供了对此功能的支持，这对于某些类型的实现来说非常有用。

一般优点

• 虚拟 DOM：使用虚拟 DOM 在性能和优化应用程序工作负载方面提供了许多优势。
• 单向数据绑定：在编写 React 应用程序时，数据只会沿一个方向流动，从而使我们能够更好地控制整个项目。
• 易于测试：使用 React 测试组件和监控操作输出非常容易，从而改善整个开发过程。

一般性

• 未实现 MVC：这意味着您有时需要使用额外的库来实现状态和模型。
• 文档不足：由于该工具不断更新，加上所有为支持它而创建的配套库，React 技术发展如此迅速，以至于没有时间编写适当的说明。
• 变化无常：正如上文所述，React 也在不断变化，开发者必须定期更新知识，掌握新的实现方式。一切都在发展，有时你可能会发现自己难以跟上这种快速变化的步伐。

Vue.js

根据通常的定义，Vue.js 是一个用于构建用户界面的渐进式框架。与 Angular 等单体框架不同，Vue 的设计初衷是让用户能够逐步采用。

由于其丰富的功能、相对容易的学习曲线以及创建高效、快速和复杂的单页应用程序的能力，它是 GitHub 上最受欢迎的 JS 框架之一。

尤其是在讨论 Vue 时，由于它们的目标相对相似，因此更容易将其与 React 进行比较。一些相似之处包括：

• 它们都使用了虚拟 DOM。
• 它们都使用了响应式和可组合的视图组件。
• 他们都专注于库的核心部分，而将其他重要操作（例如路由到配套库）留给了其他工作。

总体表现亮点

就性能而言，Vue 是一款速度极快的工具。经过 gzip 压缩后，它的大小仅为 18KB，如此小巧的体积，预示着这项技术将拥有很长的发展前景。

一般优点

• 整体性能： Vue 的体积适中，并且可以逐步采用其部分技术，因此其性能在很大程度上使其成为一款优秀的工具。
• 易用性：与其他框架（如 Angular）不同，Vue 易于学习，因此对初学者和资深专业人士都很有吸引力。
• 优秀的文档： Vue 团队在工具文档方面投入了大量精力，这对用户来说非常有帮助。
• 轻松集成到项目中：这使您能够立即在项目中开始使用 Vue。

一般性

• 社区规模较小：作为一个新兴框架，Vue 仍需时间发展其社区规模，才能达到 React 或 Angular 支持者的规模。
• 就业市场规模较小：正如我们前面提到的，由于 Vue 是一个相对较新的框架，其市场普及程度尚未达到 React 和 Angular 的水平。因此，我们可能需要一段时间才能看到就业市场对熟练的 Vue.js 开发人员的旺盛需求。

并排性能比较

现在我已经简要概述了所有框架，接下来让我们将它们并排比较，以便进行更全面的性能对比。最后，您就能明白何时应该使用哪个框架了。

我们将分析的三个因素是：

• DOM 操作：这有助于我们确定哪些框架在需要与 DOM 进行大量交互的高度动态应用程序中表现更好。
• 启动时间：这将帮助我们了解在需要更快的初始加载时间时，哪些框架更合适，这对于需要更快速度的应用程序非常有用。
• 内存分配：这揭示了哪些框架更擅长使用内存——例如，执行批量操作，如从数据库中读取或写入数千条记录。

图片中出现的每一种颜色都有其特定的含义：

• 颜色越绿，表示该框架的性能优于其他框架。
• 红色/黄色表示该框架性能较差。

所展示的所有测试均在框架的关键版本之间进行，所有时间单位均以毫秒表示。

执行基准测试

以下所有基准测试数据均来自Stefan Krause 的出色分析。我决定采用这些数据，以便大家都能在线查阅。您甚至可以找到在本地计算机上测试每个框架的说明。

DOM 操作

从这些初步统计数据可以看出，Angular 在 DOM 操作方面通常表现更佳，只有少数情况下表现稍逊。因此，总的来说，我们可以认同 Angular 在处理这类操作时性能更优。

启动时间

正如你可能已经猜到的，Vue.js 在这种情况下绝对是赢家。正如上文提到的，这个框架体积小巧，这在启动时间方面大有裨益。

在这种情况下，React 的结果也非常相似，我们不得不承认它的表现也相当出色。然而，Angular 则由于其结构较为臃肿而表现不佳，这一点我们显而易见。

内存分配

从这些数据来看，我们可以首先得出结论：Angular 在这些方面明显慢于 Vue 和 React。后两者表现出色，进一步印证了这两者在性能方面并没有显著差异。然而，如果非要选出一个赢家，那么 Vue 仍然是最佳选择。

到底…

现在我们已经从性能的角度分析了这三个框架，可以尝试给出我们的结论了。但是请记住，在基于性能选择技术时，很难找到适用于所有情况的解决方案。

原因主要在于，启动新项目时，您可能会遇到无数种不同的情况。此外，请注意，我们讨论的所有工具通常性能良好，并且都是开发人员广泛使用的成熟技术。现在，我们将尽力指导您做出选择：

你应该选择Angular吗？

以下类型的应用程序可以从使用 Angular 中受益：

• 具有高度动态内容的应用：凭借其结构和高效的数据绑定，Angular 非常适合所有需要根据用户行为动态更改显示内容的应用。Angular 会确保一旦某个组件发生更改，所有与其关联的组件都会立即更新。
• 非常大型的企业级应用程序：即使如上所述，Angular 更新非常频繁，因此需要经常更新我们的代码，但其核心结构和它提供的工具仍然使其成为大型应用程序的优秀框架。

但需要注意的是，对于小型静态页面，Angular 绝对不是最佳选择。由于其单体架构，该框架在生成小型静态页面时表现不佳，会增加不必要的开销，从而降低加载速度和整体性能。

你应该选择 React 吗？

使用这个广受欢迎的框架在处理以下问题时可以带来诸多优势：

• 对速度要求高的应用：React框架在设计时充分考虑了性能，并支持虚拟 DOM，因此，如果您需要应用程序具备速度和性能，React 是一个优秀的框架。
• 需要多功能性的应用：基本上，你可以在任何地方使用 React，而不会牺牲性能。最棒的是，你无需进行任何修改或使用任何特殊技巧就能让它在不同的平台上运行。框架生态系统会为你提供支持，例如用于移动应用开发的 React Native。
• 对于需要良好 SEO 的普通网站而言： React 的速度和整体性能可以通过提供更好的用户体验，帮助提升网站在 Google 眼中的 SEO 效果。
• 适用于国际用户：如今许多项目都面向全球用户，这意味着用户会使用不同速度和容量的硬件和网络连接来访问您的应用程序。使用 React 开发的快速应用程序可以帮助您将产品推广到带宽或硬件能力有限的不同地区。

你该选择Vue吗？

这种新近创建但正在迅速发展的框架在许多不同的情况下都证明了其有效性，例如：

• 对速度要求较高的应用：与 React 一样，Vue.js 应用往往速度极快，可以提高项目速度。
• 当您需要非常轻量级的应用程序时： Vue 不仅速度快，而且极其轻巧。这带来诸多优势，包括：在资源有限的机器上提供更佳的性能，在网络连接速度较慢的环境下提供更流畅的访问体验，以及为用户带来更佳的整体体验。
• 当您想将框架集成到现有应用中时：得益于 Vue 的内部结构，您可以轻松渐进地完成集成，而不会牺牲应用性能，并且只需使用您真正需要的功能。从长远来看，这将节省时间和金钱，使 Vue 也成为初创公司和成长型企业的理想工具。
• 适合国际用户：与我们上面对 React 所说的类似，Vue 的速度和轻量级特性也将使网速有限的国际用户有更多机会受益于您的产品。

今天就到这里！希望这篇指南能帮助你更好地了解这个主题。欢迎在下方留言，你的意见和反馈对大家的学习都非常有帮助。

想了解更多类似内容，请关注我的推特和博客。

编者按：发现本文有误？您可以在这里找到正确版本。

插件：LogRocket，一款用于 Web 应用的 DVR

 

 
LogRocket是一款前端日志工具，可让您重现问题，如同在您自己的浏览器中发生一样。无需猜测错误原因，也无需用户提供屏幕截图和日志转储，LogRocket 即可让您重现会话，快速了解问题所在。它与任何框架的应用程序完美兼容，并提供插件来记录来自 Redux、Vuex 和 @ngrx/store 的额外上下文信息。
 
除了记录 Redux 操作和状态之外，LogRocket 还会记录控制台日志、JavaScript 错误、堆栈跟踪、包含标头和正文的网络请求/响应、浏览器元数据以及自定义日志。它还会对 DOM 进行插桩，记录页面上的 HTML 和 CSS，即使是最复杂的单页应用程序，也能生成像素级精确的视频。
 
免费试用。

文章《Angular vs. React vs. Vue：性能比较》最初发表于LogRocket 博客。