单页应用程序与多页应用程序：Web 应用程序之战

单页 Web 应用程序已经存在近 20 年，但它们的流行度相对较新。 其原因是技术发展：当前的技术允许开发人员将过去的主要缺点转化为可行的解决方案甚至好处。 在本文中，我们将讨论单页应用程序和多页应用程序之间的区别以及为您的业务选择哪种应用程序。

单页应用程序 (SPA) 与多页应用程序 (MPA) 的较量比看起来要复杂得多。 让我们仔细看看每种类型的 Web 应用程序的所有优点和缺点。

内容：

1. 什么是SPA？
2. SPA是如何构建的？
3. SPA的优势
4. SPA的缺点
5. 什么是 MPA？
6. MPA的优势
7. 多页 Web 应用程序的缺点
8. SPA 与 MPA — 选择哪一个？
9. 渐进式网络应用
10. 开发一个SPA和MPA需要多少钱？

什么是SPA？

通俗地说，单页应用程序是一种无需重新加载页面即可动态加载内容的 Web 应用程序。 例如，当您在 Facebook 或 Twitter 上查看您的提要或在 Gmail 网络应用程序中查看您的电子邮件时，您不会看到令人讨厌的页面加载屏幕。 您可以在选项卡之间滚动和切换，内容会立即加载。

在单页 Web 应用程序中，当您打开页面时，所有 HTML 和 CSS 都会加载一次。 之后，当您在站点中移动时，只会加载新数据； 页面本身不会重新加载。 这使用户体验更加流畅——一方面，几乎没有等待时间，而且页面似乎可以立即加载。 在一个 100 毫秒的延迟会导致超过 160 万美元的销售额损失的世界中，这是企业主不能忽视的一个问题。

SPA是如何构建的？

单页应用程序是使用 JavaScript 框架构建的，开发人员根据多种因素（包括个人偏好）来选择框架。 根据我们在 Mind Studios 的开发人员的说法，以下是当今三大 JavaScript 框架：

大多数优秀的前端开发人员都知道不止一种框架。 许多人都知道 React、Angular、Vue，还有一些。

单页应用的优势

单页应用程序的优点很多，这就是它们尽管有几个缺点却如此受欢迎的原因。 事实上，以目前的技术，这些弊端都可以得到一定程度的解决，使得SPA成为越来越多网站站长的选择。 我们将从 SPA 的优点开始，然后介绍缺点。

1.页面加载速度快

快速流畅的页面切换，无需主动重新加载，成为SPA vs MPA之战的最大利器。 动态加载- 以小部分而不是一次加载内容 - 大大缩短了响应时间，改善了用户体验。

SPA 将部分内容处理从服务器转移到浏览器。 这样，浏览器就不需要向服务器发送请求并等待响应。 因此，SPA 甚至可以在一定程度上脱机工作。

2. 前后端分离

SPA 的另一个优点是，与 MPA 的前端和后端紧密连接不同，在 SPA 中，您可以单独重写前端，对后端的影响最小。 这使得更新 SPA 变得更容易、更快、更便宜。 但是独立的前端和后端的更大好处是，如果/当您决定构建一个移动应用程序时，您可以将 SPA 后端用于移动应用程序。 使用 MPA，您需要为移动应用程序重建后端——不是从头开始，而是重要的。

三、开发维护

构建 SPA 比构建 MPA 花费的时间更少。 这并不一定更容易——SPA 的技术堆栈比 MPA 略大——但它确实需要更少的时间，因为不需要为每个页面编写代码和创建单独的 UI/UX 设计。

除此之外，SPA 的优势包括大大简化了 Chrome 调试，这要归功于三个最流行的 JavaScript 框架的本机开发人员工具。

现在谈谈缺点。

单页 Web 应用程序的缺点（以及如何克服它们）

根据 Unbound 2018 年的研究，近 70% 的用户表示页面加载速度会影响他们从网站购买或不购买的决定。 然而，大多数市场都是作为较慢的 MPA 构建的，因为 SPA 的缺点对于大型在线商店来说尤其不方便。 开发人员一直在推动 SPA 开发，以解决阻止在线商店所有者将其网站构建为 SPA 的问题。 以下是单页应用程序的缺点以及如何用当今的技术克服它们。

1. 禁用 JavaScript

单页应用程序是使用 JavaScript 框架开发的——React、Vue、Angular，有时还有其他。 因此，如果用户在浏览器中禁用了 JavaScript，他们将看到一个空白页面。 这个问题可以使用服务器端渲染 (SSR) 部分解决，在这种情况下，应用程序在服务器上而不是在浏览器中处理。 这不是一个完美的解决方案，但它在一定程度上起作用。 幸运的是，没有太多用户首先在浏览器中禁用 JavaScript。

2. 搜索引擎优化

由于单页 Web 应用程序通过AJAX加载内容，因此搜索机器人获得的本质上是一个 DOM（文档对象模型）元素——一种没有内容的 Web 应用程序结构。 这意味着没有要立即获取的关键字。

因此，这会导致 SPA 的搜索引擎排名较低。 当网站排名靠前以被用户发现至关重要时，适当的 SEO 是必须的。 因此，对于此类网站，开发人员通常会推荐多页面应用程序。

但是，SEO 问题是另一个可以通过服务器端渲染解决的问题。 服务器端渲染发送（根据请求）一个完全加载的页面，因为它显示在服务器上，而不是在用户导航页面时加载内容。 这允许爬虫更好地与 SPA 一起工作。

另一种提升 Web 应用 SEO 游戏的方法是让您的开发人员使用适当的标签对网站进行编码，以便在网页之间导航，以帮助搜索机器人覆盖整个网站。

3. 可扩展性

SPA 在添加新特性和全新功能方面的可扩展性不是很强。 这是因为将所有内容都编写为单个页面，插入新功能可能会破坏代码，因此开发人员需要小心。 此外，过多的额外代码会使您的单个页面加载速度过慢，因为整个代码库都会立即加载。

幸运的是，JavaScript 框架有所谓的代码分割路由器，也被一些人称为块延迟加载包。 这些允许分块加载代码（因此得名）以使站点加载速度更快。

4. 安全问题

单页应用程序容易受到跨站点脚本 (XSS) 攻击。 这是一个允许黑客将恶意代码注入基于 JavaScript 的 Web 应用程序的漏洞。 不过，React.js 具有内置的 XSS 保护，对于有经验的 Web 开发人员来说，还有其他方法可以保护 Web 应用程序免受任何类型的攻击。

5. 导航

单页 Web 应用程序就是这样——一个页面。 这意味着整个站点只有一个 URL。 这使得导航变得困难——前进和后退按钮通常不起作用，并且链接到内容的特定部分是不可能的。

这个问题可以通过 API 解决。 有一些 API 可以为动态值添加路径前缀，从而可以链接到页面的特定部分，通常是标题。

什么是 MPA？

多页 Web 应用程序是我们认为的传统网站——当从一个页面移动到另一个页面时，网站会完全重新加载。 对于这种网站，加载有时会很麻烦，尤其是当您的连接速度很慢并且您需要访问多个带有媒体的页面时。

如果不仔细观察，海洋保护区似乎是过去的遗迹，很快就会灭绝。 当然，更快的页面加载总是对销售更好。 然而，事情并没有那么简单，在某些情况下 MPA 是更好的选择。

多页面应用的优势

1. 导航

多页 Web 应用程序的最大好处是它们允许传统导航。 我们的意思是，MPA 的每个页面都有自己的 URL，用户可以复制和粘贴、添加到书签、共享等。浏览器中的后退和前进按钮也可以正常工作。 在 SPA 中，要创建单独的 URL 并使用户能够通过按钮在内部“页面”之间来回跳转，您的开发人员将需要使用 API。

2. 可扩展性

这是多页 Web 应用程序不可否认的优势：使用 MPA，您的网站可以随心所欲地扩展。 您可以构建数十个页面，划分内容以更轻松地导航和更快地加载。 由于 SPA 通常会加载整个网站结构——DOM——一次，如果您的网站有很多代码（例如，如果您有一个在线商店），将其构建为 SPA 将需要您的堆栈中的额外技术。 这就是为什么 Web 开发人员建议在线商店使用 MPA 的情况并不少见。

3. 搜索引擎优化

如果您的业务严重依赖搜索引擎结果，请考虑使用多页 Web 应用程序，因为它们通常排名更高。 SPA 的动态内容加载会妨碍搜索引擎爬虫，这是 MPA 不会面临的问题。 SPA 再次要求您的开发人员采用额外的 SEO 技术，而 MPA 自然与搜索引擎保持良好关系。

4. 技术栈

作为这两种网络应用程序中较老的一种，MPA 拥有更发达的技术堆栈和更大的开发人员社区。 此外，虽然由于页面众多而需要更长的开发时间，但多页面 Web 应用程序的构建技术堆栈比 SPA 更简单、更小。

多页 Web 应用程序的缺点

1.加载速度问题非黑即白

首先，MPA 并不比 SPA 慢。 与 SPA 相比，它们更慢的是在页面之间切换。 这是因为对于 MPA，每次用户尝试更改页面（例如，转到他们的个人资料或继续结帐）时，站点都会向服务器发送请求以获取新页面的代码。 请求本身和响应需要时间来处理，因此需要加载时间。

加载新页面所需的时间取决于多种因素：

• 用户的互联网连接速度
• 加载内容的数量和类型
• 有多少用户同时访问网站
• 该站点的服务器有多强大
• 该网站所基于的技术
• 前端开发人员的技能和经验

另一方面，SPA 会在用户打开站点的那一刻加载整个代码。 之后，它只是在同一页面上的内部“选项卡”之间切换，从完全加载的缓存中动态显示请求的内容。 当有大量代码时，使用 SPA 的初始加载时间可能比使用 MPA 的时间长得多。 因此，当您需要在 MPA 和 SPA 之间进行选择时，俗话说，这一切都取决于。

2. 发展

构建多页 Web 应用程序比构建单页应用程序花费的时间更长。 这是因为您的 Web 应用程序中的每个页面都需要单独的代码和单独的设计。 根据功能的数量和复杂性，时间也可能影响成本，因为大多数公司和自由职业者按工作时间收费。

3、适应性

MPA 主要是为桌面浏览器构建的，虽然今天每个人都使他们的网站界面灵活用于移动浏览器，但与 SPA 相比，MPA 更难完全适应。 单页应用程序甚至看起来很像原生移动应用程序，而移动设备上的多页应用程序看起来像纵向模式的网站。

这不仅仅是用户界面。 如果在某个时候您决定基于多页网站构建原生移动应用程序，则需要从头开始创建 UI/UX、视觉效果和后端。 反过来，SPA 允许您重用后端，并且通常具有类似于移动应用程序界面的前端。

SPA 与 MPA — 选择哪一个？

为了总结我们上面列出的所有内容，请查看下表，概述了单页和多页 Web 应用程序之间的主要区别。

如您所见，这两种 Web 应用程序都有其优点和缺点。 虽然单页应用程序技术发展迅速，SPA 可能很快就会压倒传统网站，但今天，您仍然需要权衡利弊，然后再决定为您的企业构建哪种类型的网站：SPA 或 MPA。

额外的一点：渐进式网络应用程序

渐进式 Web 应用程序或 PWA 是过去几年的 Web 开发趋势。 简而言之，PWA 是 Web 应用程序和本机应用程序的混合体。 它们的核心是 Web 应用程序——通常是单页应用程序——因为它们使用 JavaScript、HTML 和 CSS。 但它们可以锚定在智能手机的主屏幕上，并且在某种程度上可以离线工作，就像本地应用程序一样。

您知道如何为计算机桌面上的应用程序和文件夹创建快捷方式吗？ PWA 的工作方式类似，但它们会在智能手机主屏幕上创建看起来像应用程序的网页链接。 使用最新的技术堆栈和 API，他们将一定数量的数据加载到智能手机的缓存中，以便应用程序可以在需要时离线运行。

PWA 的功能还没有原生应用那么丰富——它们不能使用需要特定权限的 NFC、蓝牙或智能手机功能。 他们也不提供完整的离线功能。 但它们灵活、易于构建、开发成本低，并且会在用户的手机上不断提醒您的网站。

开发SPA和MPA需要多少钱？

单页应用程序越来越受欢迎是有原因的。 如您所见， SPA 的大多数问题都可以缓解，因此不会导致您的 Web 应用程序死亡。 也就是说，您仍然需要为这些解决方案采用额外的技术，这会影响开发单页应用程序的时间和成本。 在决定是开发 SPA 还是 MPA 之前，您需要评估您想法的各个方面并考虑您的 Web 开发公司的经验。

以下是可以添加到等式中的一些参数：

• 您的业​​务类型
• 网站大小
• 可扩展性要求
• SEO 对您网站的重要性

如果您决定使用单页应用程序，则需要聘请拥有以下专家的开发公司：

• 专案经理
• UI/UX 网页设计师
• 专注于 JavaScript 及其框架的前端开发人员
• 后端开发人员
• 质量工程师

当然，构建一个SPA网站的成本取决于网站的规模和类型、其功能集以及所需的技术堆栈，因此我们只能粗略估计。

一个简单的单页应用程序——例如一个登陆页面——可以在两到四个星期内创建，成本低至4,200 美元。 一个更复杂的 SaaS 平台可能需要三到四个月的时间来研究、构建和发布。 开发此类 SPA 的成本约为29,000 美元及以上。 开发人员的经验也会影响创建单页 Web 应用程序所需的时间，因为 SPA 的技术堆栈比 MPA 的技术堆栈大。

另一方面，具有多个页面的最简单的多页面应用程序（否则，这意味着什么，对吧？）大约需要四到五个月的时间进行编码，根据复杂性和设计的不同，成本在35,000 美元到 42,000 美元之间。 您需要的功能越多，价格就越高，开发时间也就越长。

结论：SPA 与 MPA

单页应用程序现在正在征服世界。 虽然现在将 MPA 搁置还为时过早，但我们认为您不能——也不应该——阻止进展。 也就是说，在Mind Studios ，我们保持着眼未来并跟踪最新的技术，这些技术恰好主要用于 SPA 开发。 我们的开发人员非常熟悉传统的网站开发方法和 JavaScript 框架，因此我们可以按照您想要的方式构建您的 Web 应用程序。

如果您想了解有关如何开发 SPA 的更多信息，或者想要咨询，请联系我们。

由 Artem Chervichnik 和 Svitlana Varaksina 撰写。