单页应用程序和 Web 应用程序之间的区别。

Question

单页应用程序和 Web 应用程序有什么区别。有什么优点和缺点。什么时候应该使用 SPA，什么时候应该使用 Web 应用程序

Answer 1

来自：亚当弗里曼的书“Pro Angular 9”。 ：

很长一段时间以来，Web 应用程序的开发都是为了遵循一个
（往返模型）。

• 浏览器向服务器请求初始HTML文档。
• 用户交互——例如点击链接或提交表单会导致浏览器请求和接收全新的HTML文档。
• 浏览器本质上是 HTML 内容的渲染引擎，所有应用程序逻辑和数据都驻留在服务器上。。李>
• 浏览器发出一系列无状态HTTP请求，服务器通过动态生成HTML文档来处理HTML文档

目前的许多 Web 开发仍然是针对 往返应用程序，尤其是因为它们对 浏览器 的要求很少，这确保了尽可能广泛的客户支持。 但是有一些往返应用程序的缺点：

• 它们让用户等待下一个 HTML 文档被请求和加载。
• 他们需要大型服务器端基础架构来处理所有请求并管理所有应用程序状态
• 它们需要更多带宽，因为每个 HTML 文档都必须是独立的（导致服务器的每个响应中都包含许多相同的内容）。

（单页应用程序）采用不同的方法。

• 初始 HTML 文档被发送到 浏览器
• 用户交互导致 **Ajax 请求对 HTML 的小片段或插入现有元素集的数据向用户显示。
• 从不重新加载或替换初始 HTML 文档
• 在异步执行 Ajax 请求时，用户可以继续与现有 HTML 交互，即使这只是意味着看到“数据加载”消息。**

Answer 2

见this answer。就开发工作而言，一个过于简化的比较是

多页应用：

1. HTTP 请求中包含的用户操作（例如 HTTP POST、HTTP GET）
2. 请求已处理，服务器以 HTTP 页面响应

缺点：需要很多页面来响应每个用户操作（例如，将项目添加到列表、更新表单数据），而在 SPA 中，数据绑定可以为您完成更新视图的大部分工作。其次，Web 应用程序有责任维护状态，否则会在整个页面请求之间丢失。相比之下，SPA 可以在 XHR 之间在内存中保持其状态，而无需额外的工作，而浏览器保持在同一页面上。

单页应用程序 (SPA)：

1. 在客户端和服务器端配置路由
2. 在客户端和服务器上编写“控制器”代码
3. 在客户端初始化框架
4. 在 JavaScript 中处理用户操作
5. 处理 XHR 请求/响应

这些只是我在开发单页和多页应用程序时注意到的典型步骤，这并不一定或广泛代表所有情况。

为了开发 SPA，我们强烈建议使用 AngularJS 等框架，并且非常固执己见，其优势在于可以指导构建客户端 JavaScript。

当多页面应用程序通过加载整页来响应用户操作时，根据定义，单页面应用程序被限制为 1 个页面（否则它们将是多页面），而是依赖于 XHR。