译单页面应用程序（SPA）vs 多页面应用程序（MPA）：选择哪个用于web开发


原文链接：Single-Page Apps(SPA) vs Multi-Page Apps(MPA): What To Choose For Web Development

一个成功的web应用程序始于为它选择正确的技术栈和架构。在web开发方面，选择SPA（single-page applications）还是MPA（multiple-page applications）一直是一个热议的话题。面对如此多的不同意见，你可能很难决定使用哪个来构建你的的web应用程序。本文对SPA和MPA的优缺点进行了清晰的解释，并在最后列出了SPA和MPA的最佳使用场景。

什么是SPA？

包含在一个页面中的应用程序称之为SPA。

当你访问SPA时，浏览器会下载整个应用程序的数据。因此，你浏览应用程序的不同部分时页面不会重新加载。

这是因为SPA在浏览器而不是在服务器上执行逻辑。它使用JavaScript框架来实现这一点，JavaScript框架可以在客户端处理大量数据。JavaScript还允许SPA只重新加载用户请求的部分，而不是整个应用程序。因此，SPA以提供快速高效的性能而闻名。

JavaScript框架通常用于构建漂亮、高性能的SPA。使用Angular、Reactjs是构建SPA的常见选择。

尽管SPA是最近才出现的，但使用它的网页无处不在。像Gmail和Google Docs这样的大多数Google应用程序都是使用Angular构建的SPA。甚至GitHub也是一个SPA。很多在线内容平台也是SPA。Netflix是SPA的一个突出例子。

像Facebook和Twitter这样的流行社交网络平台都是用Reactjs构建的SPA。然而，这些应用更多的是混合应用，它们也使用多页面架构来执行某些操作。例如，Feed标签页是一个完整的SPA，在这个页面滚动不需要重新加载页面。但是，从Feed标签页移动到其他标签页（如Photos或Friends）确实需要重新加载页面。

什么是MPA？

顾名思义，MPA是一个具有多个页面的应用程序。它的工作方式和传统的静态页面一样：每当用户与应用程序交互都需要重新加载页面。

MPA通常包含大量数据和复杂的结构，它的页面大多包含静态内容和指向其他内部页面的链接。这就是为什么MPA的用户界面更复杂和多层。

你可以简单地用HTML和CSS来构建MPA。然而，许多开发人员也选择使用JavaScript和jQuery来提高应用程序的性能。

大多数大型电子商务应用程序都是使用MPA构建的。

SPA vs MPA：SPA的优点

SPA的出现只是因为开发人员希望克服MPA带来的限制。SPA的主要优点包括：

  • 速度和响应能力
    • 在SPA和MPA的性能方面，前者总是胜出。在SPA中，大多数资源（如HTML、CSS和Javascript）不需要每次交互都加载。初始加载后，只有新数据在服务器和浏览器之间传输。
    • 此外，SPA只在用户请求时重新加载所需的内容。所以SPA的服务器负载非常轻。因此，SPA的使用和交互比MPA快得多。
  • 移动端友好
    • 网站如果想从移动端上获取大部分流量，应用程序就需要一个移动端友好的版本。SPA使你能够重用web应用程序的后端代码来构建移动应用程序。
    • 使用SPA可以使移动应用程序的开发过程更轻松、更快。此外，由于SPA中的UI已经以应用程序的形式进行了设计，所以不需要为移动设备重新调整UI。
  • 线性用户体验
    • SPA为用户提供了一个有组织的线性界面。从web应用程序的名称到其内容列表，所有内容都被组织成了从上到下的结构，这使得SPA非常容易导航。
    • 因为SPA不需要单击链接实现内容的过度，所以通过滚动页面用户就可以体验无缝的浏览。
  • 前端和后端的明确划分
    • SPA允许你保持前端和后端完全独立。这样做的主要优点是你的开发团队可以同时开展前端和后端工作。
    • 此外，由于SPA可以从UI元素中区分出数据，测试SPA就不会那么困难了。
    • SPA还可以方便地扩展应用程序或更改数据获取的方式。你可以很容易地做到这一点，而不必担心它对UI的影响。你也可以重写应用程序的前端而不影响服务器，除了需要替换一些静态文件。
  • 缓存功能和离线支持
    • SPA因其高效缓存任何本地数据的能力而备受青睐。SPA只需要向服务器发送一次请求。之后，它存储从服务器接收的所有数据，以便在需要时使用这些数据。因此，即使在设备失去互联网连接的情况下，SPA也可以在很大程度上发挥作用。
  • 使用chrome易于调试
    • 在SPA中使用chrome进行调试比在MPA中调试要容易得多。这有两个根本原因。首先，你可以在一个页面上同时查看整个代码。其次，构建SPA的框架有自己调试工具。例如，你可以通过React developer tools和Vue.js devtools轻松调试用React和Vue构建的SPA。

SPA vs MPA：SPA的缺点

选择SPA架构有其自身的缺点。但是，通过SPA最佳实践可以克服大多数。

  • SPA不是很适合搜索引擎优化（SEO）
    • SEO是选择SPA还是MPA的一个决定性因素。SPA使用JavaScript运行，它只在用户交互后才加载内容。因此，当网络爬虫试图在搜索引擎中索引页面时，SPA看起来就像一个没有内容的空页面。
    • 此外，SPA是通过将所有内容合并到一个网页中来开发的。所以你不能根据相关关键字对内容的不同部分进行排名。但是，通过服务器端渲染（SSR）和intelligent search engine optimiztion practices，你可以克服这一限制。
  • SPA需要额外实现浏览器的前进后退功能
    • spa的一个主要缺点是：用户无法通过点击back按钮返回到应用程序的先前状态。相反，浏览器会将它们带到上一页，这时因为SPA不能保存用户在页面不同状态之间的跳转。这样的行为可能会让用户感到厌烦。
    • 然而，这个问题也可以通过为SPA框架配备HTML5 History API来解决。使用此接口，开发人员可以通过JavaScript访问浏览器导航历史记录。
  • SPA面临更大的安全风险
    • 虽然保护SPA比保护MPA快得多，但它可能不一定是非常有效的。SPA运行在JavaScript上，而JavaScript不进行代码编译。因此，黑客可以利用跨站点脚本（XSS）来访问应用程序的客户端代码库并向其注入恶意代码。
    • 防范这种安全威胁的最佳方法是确保只向浏览器发送可下载的数据。它有助于将可下载的JavaScript分解成更小的块，以确保其安全性。
  • SPA过于依赖JavaScript
    • SPA是在JavaScript上构建和运行的。这种对JavaScript的依赖有时会阻碍应用程序的性能。如果用户在浏览器中禁用了JavaScript，他们根本看不到你的应用程序内容，页面看起来就像一张空白页。这可能导致更高的跳出率，以及更糟的SEO表现。
  • SPA不容易扩展
    • 这就是为什么MPA在SPA与MPA之争中仍然占据强势地位的原因，SPA不容易扩展。如果在现有的SPA中添加更多的内容或功能，将会在很大程度上增加应用程序的初始加载时间，并影响应用程序的性能。

SPA vs MPA：MPA的优点

如果你的web应用程序需要满足不同的用户群，MPA可以提供很大的帮助。

  • MPA更适合搜索引擎优化（SEO）
    • MPA提供的最大优势就是搜索引擎优化。与SPA不同，你可以将MPA的不同页面用于不同的内容。这样，每个页面都可以针对特定的关键字进行优化。通过向这些优化的页面添加适当的meta标记，你的web应用程序页面可以在google SERP上获得更好的排名。
  • MPA易于扩展
    • 向MPA添加新内容或功能没有限制。你可以根据需要向应用程序添加任意数量的新页面，以容纳更多内容。因此，如果你的应用包含许多特性、产品或服务，那么MPA是web开发的理想选择。
  • MPA可以更好的利用Google Analytics
    • Google Analytics为不同的页面生成不同的报告。对于MPA，你可以利用Google Analytics来了解应用程序的哪些页面性能良好，哪些页面性能不佳。基于这些，你可以对web应用程序的内容进行更改，以提高其可见性和页面停留时间。
    • SPA只有一个页面，因此很难确定应用程序的哪个部分性能不佳。
  • MPA为用户提供大型应用程序的可视化地图
    • 当你打算构建一个大型应用程序时，就不要纠结选择MPA还是SPA了。
    • 如果你计划通过web应用程序共享大量信息，那么你需要一个能够将其组织成不同类别的结构。例如，如果你想建立一个电子商务商店，你不能在一个页面上容纳你的所有产品。
    • MPA不仅能清晰地组织信息，而且能让用户很容易地找到他们要找的东西。你在其中对内容进行分类的选项卡就像一个可视化地图，用户可以在没有任何混乱的情况下进行导航。

SPA vs MPA：MPA的缺点

MPA存在一定的局限性。这些缺点是社区在各种项目中迅速采用SPA的原因。

  • 复杂的开发和测试
    • 前端和后端在MPA中紧密耦合。MPA的开发和测试更加耗时。此外，在前端进行更改可能还需要在后端进行更改。这给开发团队增加了更多的负担。
  • 较慢的性能
    • 在MPA中，每次用户交互或移动到应用程序的不同部分时，浏览器都必须下载所有应用程序数据。这会影响MPA的速度和性能。
  • 不易于维护和更新
    • 开发人员需要定期维护MPA的每一个页面。这可能比维护单个页面应用程序更加困难。此外，你还需要分别保护每个页面，这增加了总体开发负担。

SPA vs MPA：使用哪个用于web开发

正如我们上面所解释的，每种架构都有自己的优缺点。为了做出正确的选择，你必须首先明确你的商业目标。然后，概述为了实现这些目标需要具备的功能。

最好在以下情况下使用SPA：

  • web应用程序的主要目标是品牌故事讲述。
  • 你想在将来构建一个更大的应用程序的小版本。
  • 当你的应用程序不严重依赖搜索引擎优化。spa是SaaS产品、社交网络和其他动态应用程序（不需要在网页内容的切换上重新刷新网页）的理想选择。

另一方面，MPA的可扩展性和SEO友好性在以下情况下更为有利：

  • 你想通过应用程序展示大量的产品、服务或功能。
  • 你的应用程序需要搜索引擎排名。
  • 你想要迎合不同的用户群，有许多不同的需求和偏好。