SPA vs MPA vs PWA

1、单页面应用程序（SPA）

① 什么是 SPA 

SPA 全称为 Single-Page Application，表示单页面应用程序。

也就是说只有一个 HTML 文件的 Web 应用，我们通过 Vue 开发的项目其实就是典型的 SPA应用

在单页面应用程序中，我们不会为每个路径创建多个 HTML 文件，而是使用 JavaScript 为同一页面上的不同路径呈现不同的组件。

当从浏览器请求单页面应用程序时，就会下载一个 bundle.js 文件，该文件包含所有请求网站的已编译 JavaScript 代码。使用这种方法，浏览器会通过使用 HTML5 History API 根据用户选择的路径呈现单个页面。 

如果网站使用了延迟加载，那么可能会有多有 bundle.js 文件会根据请求的路径进行下载。

因此，除了特殊情况，否则不会重新加载页面（再次从服务器请求）。如果想维护应用程序的状态，这一点是非常重要的，因为重新刷新页面就会重置应用程序的状态。 

SPA的特点:

1) SPA 应用只有一个 HTML 文件，所有的内容其实都在这个页面中呈现的；
2) SPA 应用只会加载一次HTML文件, 不会因为用户的操作而进行页面的重新加载；当用户与应用程序交互时，是通过动态更新页面内容的方式来呈现不同的内容

 

 

② SPA 的优点

• 提高页面加载速度，从而获得更好的用户体验

它们通常只加载一次。加载后，页面渲染取决于浏览器的速度。

不会重新加载整个网页, 只是局部更新。

• 更少的服务器负载

渲染逻辑在浏览器中执行。服务器和客户端之间只发送相关数据。

只用处理数据不用处理界面。

• 缓存：

只向服务器发送一次请求，返回的响应会被缓存，也可以离线使用SPA。

• 调试：

React 和 Vue 等 SPA 框架提供了调试工具，这使开发人员的开发调试更加轻松。

• 代码可重用性：

开发人员可以重用代码，这使得开发效率更高。

• 转场动画：

容易实现。

• 页面间数据传递：

因为在一个页面内，多以页面之间数据传递很容易

 

③ SPA 的缺点

• 搜索引擎优化 (SEO) 较差：

搜索引擎具有可以解析 JavaScript 的爬虫，但它们很难爬取异步内容。加载初始页面后，不知道还有其他数据的爬虫将停止爬取，从而导致 SEO 效率低。

• 内存泄漏：

事件监听器占用大量空间。使用 SPA 在客户端很容易引入内存泄漏，如果将事件侦听器添加到全局对象，而没有在卸载组件时删除它们，就会产生内存泄漏。如果不想导致内存泄漏，则需要清理事件侦听器、定时器等。

• 安全性：

与 MPA 相比，SPA 更容易受到跨站点脚本攻击（XSS）。

2、多页面应用程序（MPA）

 ① 什么是 MPA

MPA 全称 Multi-Page Application，表示多页面应用程序。多页面应用程序由多个 HTML 文件组成，每当请求页面时就会下载这些文件。

我们在地址栏输入的每个新的 URL 或单击的每个超链接时都会向服务器发送一个新请求，并下载一个新的页面。在这种方法中，服务器完成了较为繁重的工作。

因此，如果用户的网络连接较差，每个页面可能需要很长时间才能加载出来。

② MPA 的优点

• 搜索引擎优化（SEO）更好：

单页可以只有有限数量的关键字，但多页应用程序可以为多个页面提供相同数量的关键字，这为爬虫提供了更多关于网站的信息.

• 良好的可扩展性：

可以持续添加功能，不断扩展。但在 SPA 中，随着不断添加功能，bundle.js 将会不断增长，因此要么减少内容，要么进行延迟加载。

• 内存泄漏很少见：

服务器端很有可能出现内存泄漏，但客户端内存泄漏很少见，因为浏览器将为每个导航链接加载不同的脚本。

 

③ MPA 的缺点

• 加载速度慢：

它们不断地为每个请求加载新页面（即使 UI 发生了细微的变化，页面也必须重新加载）。如果客户端的网络连接不好或服务器速度慢，加载速度就会下降，最终导致用户体验不佳。

• 开发效率低：

代码可重用性较低，文件较大，前端与后端的耦合更紧密。这些因素会使开发效率低。

• 增加服务器负载：

与服务器的每次交互都包含一个需要渲染的 UI 包。

• 转场动画：

无法实现。

• 页面间数据传递：

依赖 URL、Cookie、或者 localStorage 等，实现麻烦。

3、渐进式应用程序（PWA） 

① 什么是 PWA 

PWA 全称 Progressive Web Apps，表示渐进式应用程序。

渐进式应用程序可以在独立的窗口中运行，而不是在浏览器的选项卡中运行。简单的说，它们是一种 web 应用程序，类似于本地应用程序，可以安装在手机、平板电脑或者笔记本电脑上。

下载后，用户可以通过屏幕上的图标访问该应用。这种应用还可以向用户发送推送消息和通知。渐进式应用程序可以是 单页面应用（SPA）也可以是多页面应用（MPA）。

想要申请 PWA 应用，必须满足三个条件：

1. 安全上下文 (HTTPS)： 安全上下文是为用户身份验证和机密性定义的最低标准。PWA 的许多 API 和许多功能（如地理定位）只有在应用程序通过安全网络提供服务时才可用。
2. Service Worker： Service Worker 是在后台运行并控制浏览器如何处理网络请求和内容缓存的脚本。PWA 通过服务工作者提供离线服务。
3. 清单文件：这是一个 JSON 文件，用于保存 PWA 所需的应用程序信息，例如应用程序的名称、启动 URL、多种尺寸的图标和主题颜色。

与原生移动应用程序相比，渐进式 Web 应用程序更小。研究表明它们有助于增加流量和用户参与度，并降低跳出率，这主要归功于它的离线可用性。