【译】单页面应用程序（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友好性在如下状况下更为有利：

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