单页面应用SPA VS多页面应用MPA

单页应用程序（SPA）越来越受欢迎。Facebook，YouTube，Twitter，GitHub和许多Google服务都是使用SPA技术构建的。但是，多页应用程序（MPA）构成了Internet上大多数网站。但是MPA的时代结束了吗？
在本文中，我将搁置围绕技术的所有宣传，并客观地对其进行评估。我将列出SPA方法的优缺点，并建议何时使用它。
SPA与MPA。有什么不同？
当MPA对您的输入做出反应或必须显示一些新内容时，它会向服务器请求一个新的HTML页面。收到标记后，浏览器将呈现新页面，使其重新加载。

AJAX（异步JavaScript和XML）允许Web应用程序仅刷新页面的一部分。
与SPA交互时，浏览器将对服务器进行AJAX调用。但是服务器无需呈现新页面，而是可以向您发送数据（通常以JSON格式）。然后，SPA将使用该数据直接在浏览器中呈现页面的某些部分。
结果是一个应用程序由一个高度交互的网页组成，该网页从未完全重新加载。

因此，现在您知道了SPA和MPA之间的基本区别，让我们更深入地了解它们的优缺点。

SPA的优势：
1.快速流畅的用户体验

不难想象，持续不断的整页重新加载会如何损害用户体验。
您将在SPA中永远找不到此问题。JavaScript，CSS和HTML在应用程序的整个生命周期内仅加载一次。初始加载后，服务器仅向您发送新数据。
这减少了服务器-客户端流量，并使应用程序感觉“更智能”。
使用传统的应用程序，服务器必须为成千上万的用户生成完整的页面。但是对于SPA，渲染是在客户端完成的。这意味着服务器对用户请求的响应速度更快。
因此，只要您不使用可怕的过时硬件，SPA就会比传统的Web应用程序更快，响应速度更快。
这使它们成为将旧的桌面应用程序和企业级解决方案移植到Web而不改变其UI和工作流的理想人选。

2.本地缓存和离线功能
发出初始请求后，单页Web应用程序将缓存从服务器接收的所有数据并将其存储在本地。这样，即使Internet连接失败，SPA也可以继续运行。
当应用程序重新连接到网络时，它将本地数据与服务器同步并恢复全部功能。
您也可以部分放弃使用Cookie来支持Web Storage。尽管功能非常相似（跟踪用户，他们的设置和首选项），但是本地存储可以存储更多数据（每个cookie 5MB vs 4KB）。
它也不必通过每个HTTP请求将数据发送回服务器。这加快了静态文件（JavaScript，CSS，图像和其他媒体）的加载。

3.完美的移动适应性
到2017年底，移动互联网速度几乎是其固定速度的两倍。同时，用户都非常渴望放弃运行缓慢的应用程序。因此，移动用户将从加载速度更快的应用程序中受益最多也就不足为奇了。
而且，单页应用程序从Web移植到移动设备要容易得多。通常，您可以为应用程序的Web版本和iOS / Android版本使用相同的后端代码，这在传统方法中很少见。
最后，与MPA相比，单页UI更接近于本机应用程序。这意味着在使SPA适应移动设备时，您无需在设计上进行太多更改。

4. API重用
您已经拥有移动应用程序，则创建SPA也会容易得多。如果应用程序与服务器端的某些API通信，则您可能会在Web应用程序中重用相同的API，而无需对其进行重大更改。
反之亦然，如果您打算启动本机应用程序，那么当您开始移动开发时，为单页Web应用程序编写的API将会派上用场。

5.简化开发
单页应用程序开发类似于使用LEGO建造房屋。有了组件（LEGO积木）后，就可以快速构造SPA，而无需一遍又一遍地添加相同的代码片段。
另外，您不必编写用于在服务器上呈现HTML页面的自定义代码。而且从file：// URI开始开发要容易得多，因为在此阶段不需要服务器。
最后，SPA在生产中易于部署和版本化。

6.后端/前端分离
在单页应用程序中，UI与数据分开。这使您可以在不影响后端的情况下（不包括某些静态资源文件）尽可能多地修改前端并更改UI。
前端/后端开发的解耦使查找代码库中的错误变得更加容易。集成新的API并更改数据进入SPA框架并流到不同系统的方式也更加容易。全部不影响UI。

7.无痛的Chrome调试
使用Chrome调试单页应用程序要容易得多。您可以一次看到整个代码，观察网络操作，并检查页面元素以及相关数据。
并且不要忘记，单页应用程序javascript框架具有自己的Chrome DevTools扩展，例如Vue.js devtools，AngularJSBatarang，Ember Inspector或React开发人员工具。

SPA缺点（以及解决方法）
1. SEO问题
长期以来，Google和其他搜索引擎在为SPA编制索引方面遇到了麻烦。他们的机器人擅长抓取静态HTML页面，但装备不足，无法呈现动态内容。由于无法执行JavaScript，他们在SPA中看到的只是一个空的HTML容器。
结果，单页应用程序很少将其放在搜索结果的顶部。
在过去的几年中，Google在索引JavaScript方面变得更加出色。
不过，Google承认有时无法正确索引单页应用程序。更不用说其他搜索引擎尚未获得同样的SPA爬行能力。


搜索引擎对使用各种JS框架创建的SPA进行爬网

SEO的另一个问题是，与传统应用程序相比，SPA具有有限的语义内核。这源于这样一个事实，即不可能在单个页面的网站中填充尽可能多的关键字。
要解决此问题，请选择内容以更好地满足用户要求。另外，利用元描述，标签和内部锚文本链接。或者，您可以将SPA专用于单个主题，因为Google在主题网站上的排名较高。
最后，您可能会遇到一些可共享性问题，因为Facebook的漫游器在爬取SPA方面表现异常出色。

2.内存泄漏
SPA中使用的事件侦听器可能会导致用户设备上的可用内存丢失。由于您的应用程序实质上是一个永远不会重新加载的页面，因此，SPA运行时间越长，内存泄漏就越严重。
如果您在开发过程中没有对此问题给予足够的重视，则可能会导致性能显着下降，并迅速耗尽设备的电池电量。

3.安全问题
跨站点脚本（XSS）使SPA更加容易受到黑客攻击。XSS允许侵入者将恶意的客户端脚本插入本来值得信任的应用程序中。
但是，有一些方法可以打击跨站点脚本。使用单页应用程序，您可以保护数据端点，并将客户端下载的JS分为多个独立的片段。
这样，攻击者将无法立即访问您的所有代码。

4.缓慢的第一次加载
SPA的启动速度比传统应用程序慢。这是由于客户端渲染而发生的。在您的浏览器呈现页面之前，它必须加载庞大的JS框架。这可能需要一段时间，尤其是对于大型应用程序。
但是在第一次渲染之后，SPA的速度比MPA快得多。
幸运的是，有多种方法可以加快SPA的初始化速度，例如动态加载资产和最小化脚本。

5.禁用JavaScript的有限功能
一小部分用户在其浏览器中禁用了JavaScript。原因从增加速度到安全问题。对于这样的人，您的尖端SPA将彻底无法使用。
此问题的部分解决方案是对第一次加载使用服务器端呈现。不过，禁用JS后，您的某些应用程序功能可能仍然不可用。
渐进增强哲学还允许您创建可为禁用JavaScript或使用过时的浏览器和硬件的用户提供令人满意的体验的应用程序。

6.应用程序可扩展性差
使用传统方法，应用程序的功能分布在多个页面上。您可以逐渐添加内容并扩展页面数。在不影响其他页面的情况下，更改MPA的一部分也相对容易。
例如，如果您想更改应用程序的框架，则可以逐页进行操作，直到重新设计整个MPA。
在SPA中，业务逻辑内置于易于开发和维护的独立组件中。
但是，更改应用程序的体系结构完全是另外一回事了。单个功能可能包含多个组件，更改常用元素可能会影响应用程序的其他部分。
因此，在计划阶段必须考虑SPA功能的未来更改。如果您对应用程序的前进方向有清晰的了解，那么开发人员将能够在架构定型之前考虑可能的更改。

7.导航问题
在SPA中，后退和前进按钮具有某些意外行为。
“后退”按钮实际上可以加载上一页（可以使您转到一个完全不同的网站），而不是使您返回到应用程序的先前状态。
当您按下“后退”按钮时，该应用程序也可能会失去滚动位置，因此您最终会进入页面的其他部分。
在某些SPA中，您甚至无法在新标签页中打开链接，刷新页面或将其添加为书签。
幸运的是，您可以使用已经与大多数JS框架捆绑在一起的HTML5 History API来解决导航问题。

8.由于异步请求而产生的奇怪行为
SPA异步管理用户请求，这可能导致某些意外行为。
当您按下按钮或单击传统应用程序中的链接时，它将停止所有当前活动并向服务器发出新请求。
但是在SPA中，服务器响应是异步发出的。这意味着他们的到达顺序可能与您要求的顺序不同。因此，如果您非常快地单击几个链接，您可能会在错误的页面上结束。或者，如果您多次按下同一按钮，则可能会遇到图形故障。
您的开发人员将必须专门编写代码来处理这种情况。

结论
现在您了解为什么单页应用程序最近变得如此流行。但是在您选择SPA与MPA辩论之前，请先考虑要实现的目标。
如果您打算提供多种服务或不同类别的商品，那么创建具有多个页面的网站是合乎逻辑的解决方案。这就是为什么如此构建大量应用程序（如Amazon）的原因。
对于具有大量内容（例如新闻门户）且需要完美SEO的网站，MPA也是一个好主意。
相反，如果您希望专注于推广单一产品或服务，SPA是一种更好的解决方案。它们使您可以将令人印象深刻的功能打包到轻量级应用程序中。出色的UX使SPA成为移植高度交互式桌面应用程序和在Web上创建类似本机体验的理想选择。
这就是为什么SaaS产品中的CRM / ERP系统和交互式仪表板通常被构建为单页应用程序的原因。


总而言之，SPA是一项了不起的技术。它具有许多优点，您可以通过一支合格的开发团队轻松克服其一些弊端。