一、多页应用 (Multi-Page Application, MPA) - 传统模式
1. 什么是 MPA？
MPA 是最传统的 Web 应用模式。整个应用由多个独立的、完整的 HTML 页面组成。用户的每一次页面跳转（例如，点击链接、提交表单），浏览器都会向服务器发送一个新的请求，服务器接收请求后，返回一个全新的 HTML 文档，浏览器再完整地加载和渲染这个新页面。
典型代表：早期的大部分网站，如新闻门户网站、企业官网、传统的电商网站（如亚马逊、淘宝的商品列表页）。
2. 工作流程
codeMermaid
sequenceDiagram
participant User as 用户
participant Browser as 浏览器
participant Server as 服务器
User->>Browser: 访问 a.html
Browser->>Server: 请求 a.html
Server-->>Browser: 返回完整的 a.html
Browser->>User: 渲染并显示 a.html
User->>Browser: 点击链接，跳转到 b.html
Browser->>Server: 请求 b.html (这是一个全新的请求)
Server-->>Browser: 返回完整的 b.html (包含<head>, <body>等所有内容)
Browser->>User: 页面白屏闪烁，然后渲染并显示 b.html
3. 优点
- SEO 友好 (Search Engine Optimization) ：每个页面都有自己独立的 URL 和完整的 HTML 内容，非常利于搜索引擎的爬虫进行抓取和索引。这是 MPA 最大的优势之一。
- 首屏加载速度快：对于单个页面，通常只需要加载该页面所需的资源，不像 SPA 可能需要一次性加载大量的 JavaScript。
- 架构简单，易于理解和开发：技术栈成熟，前后端职责相对清晰（后端负责渲染模板），对于新手和简单项目来说更容易上手。
- 无需考虑复杂的状态管理：页面之间的状态隔离，通常通过 URL 参数或简单的本地存储来传递。
4. 缺点
- 页面切换体验不佳：每次跳转都是一次完整的页面加载，通常会伴随着“白屏”或“闪烁”，用户体验不连贯，感觉很“慢”。
- 前后端耦合度高：通常由后端模板引擎（如 JSP, PHP, Pug）渲染页面，前端和后端的开发流程紧密绑定，不利于前后端分离。
- 服务器压力较大：每次切换页面，服务器都需要重新渲染并返回整个 HTML 页面，即使页面的大部分内容（如页头、页脚）是重复的。
- 数据状态难以跨页维护：因为每个页面都是独立的，要在不同页面间共享复杂的数据状态会变得很麻烦。
二、单页应用 (Single-Page Application, SPA) - 现代模式
1. 什么是 SPA？
SPA 只有一个主 HTML 页面（通常是 index.html）。当应用初始化时，浏览器会加载这个主页面以及所有必需的资源（主要是大量的 JavaScript）。之后，用户的任何操作都不会再请求新的 HTML 页面。相反，JavaScript 会拦截用户的行为，通过 API 从服务器获取数据 (通常是 JSON 格式) ，然后动态地在当前页面上重绘部分内容，实现页面的更新和切换。
典型代表：Gmail, Google Maps, Figma, Trello，以及绝大多数使用 React, Vue, Angular 构建的现代 Web 应用。
2. 工作流程
codeMermaid
sequenceDiagram
participant User as 用户
participant Browser as 浏览器
participant Server as 服务器
User->>Browser: 首次访问应用
Browser->>Server: 请求 index.html 和核心 JS/CSS
Server-->>Browser: 返回 index.html 和资源
Browser->>User: 渲染初始界面 (Shell)
User->>Browser: 点击链接，切换到“用户列表”视图
Note right of Browser: JS 拦截点击, 阻止默认跳转
Browser->>Server: 发起 API 请求 (e.g., /api/users)
Server-->>Browser: 返回用户数据 (JSON)
Note right of Browser: JS 接收数据, 动态更新 DOM, 修改 URL (无刷新)
Browser->>User: 界面无缝切换到“用户列表”
3. 优点
- 极致的用户体验：页面切换流畅、快速，没有白屏和刷新。内容区域的变化就像在操作一个桌面应用程序，用户体验非常连贯。
- 前后端完全分离：前端负责视图和交互，后端只负责提供数据 API。两边可以独立开发、测试和部署，团队协作效率更高。
- 服务器压力减小：一旦应用加载完成，后续的交互大多只是请求数据，服务器不再需要渲染 HTML，减少了计算资源消耗。
- 状态管理更方便：所有状态都维护在前端，有 Redux, Vuex 等成熟的状态管理工具，可以轻松地在不同视图间共享和管理复杂状态。
4. 缺点
-
首屏加载速度慢：首次进入应用时，需要下载一个较大的 HTML、CSS 和 JavaScript 包，可能会导致较长的白屏等待时间。
-
SEO 不友好 (有解决方案) ：传统 SPA 的 HTML 内容是靠 JavaScript 动态生成的，初始的 HTML 文件可能只有一个空的
。这使得搜索引擎爬虫难以抓取到有效的页面内容。- 解决方案：服务器端渲染 (SSR) 或静态站点生成 (SSG) 等技术（如 Next.js, Nuxt.js）可以解决这个问题。
-
开发复杂度更高：需要处理客户端路由、状态管理、内存管理等问题，对开发人员的技能要求更高。
-
对浏览器和设备性能有要求：所有逻辑都在客户端的浏览器中运行，复杂的应用可能会消耗较多的设备内存和 CPU。
