前言
在 Web 2.0 时代之前，跳转页面意味着漫长的白屏等待。而 SPA（Single Page Application）的出现，彻底改变了 Web 应用的交互方式。它让网页看起来更像一个原生的 App，流畅、快速、且充满动效。
一、 什么是 SPA（单页面应用）？
SPA (Single-Page Application) 是一种 Web 应用模型。它在初始化时仅加载 一个 HTML 页面。当用户与应用交互时，它不会加载整个新页面，而是通过 JavaScript 动态地重写当前页面内容。
二、 SPA 的三大核心支柱
1. 单 HTML 结构（Single Entry）
整个应用只有一个入口文件（通常是 index.html）。
- 传统应用：每个页面对应一个
.html文件。 - SPA：只有一个空的容器（如
<div id="app"></div>），所有的 UI 都是由 JS 动态“塞”进去的。
2. 动态局部更新（AJAX/Fetch）
当数据变化时，SPA 不会请求新页面。
- 它通过异步请求获取数据（JSON 格式）。
- 利用前端框架（Vue/React/Angular）的 虚拟 DOM 技术，仅更新发生变化的 DOM 节点，避免了整页闪烁。
3. 前端路由（Client-Side Routing）
这是 SPA 的“灵魂”。虽然地址栏的 URL 在变（如从 /home 变到 /profile），但浏览器并没有向服务器发送 HTML 请求。
- 实现方式：监听
hashchange事件或使用history.pushState。 - 效果：让用户在感官上觉得是在“跳页面”，实则是 JS 在切换组件。
三、 SPA vs MPA (多页面应用)
| 维度 | SPA (单页面应用) | MPA (多页面应用) |
|---|---|---|
| 页面组成 | 一个 HTML + 多个 JS/CSS 碎片 | 多个 HTML 页面 |
| 刷新方式 | 局部刷新（无白屏） | 整页刷新（有白屏） |
| 路由 | 前端路由（JS 控制） | 后端路由（服务器控制） |
| SEO | 较差（需额外处理） | 天然友好 |
| 首屏加载 | 慢（需加载基础框架和 JS） | 快 |
四、 优缺点权衡（避坑指南）
优点 ✅
- 极致体验：切换无刷新，像原生 App 一样流畅。
- 前后端解耦：后端只负责提供 API 接口，前端负责所有渲染逻辑。
- 减轻服务器压力：服务器不需要渲染 HTML，只传输数据。
缺点 ❌
- SEO 不友好：由于内容是 JS 动态生成的，搜索引擎爬虫初期抓取不到有效信息（可通过 SSR 服务端渲染 解决）。
- 首屏加载慢：第一次打开需要下载大量的 JS 脚本。
- 内存占用：页面不刷新，如果不注意清理定时器或监听器，容易造成内存泄漏。
五、 面试模拟题
Q1：SPA 路由的 Hash 模式和 History 模式有什么区别？
参考回答：
- Hash 模式：URL 中带
#，不美观。兼容性极好，改变 Hash 不会发送请求，不需要后端配置。 - History 模式：URL 看起来和普通路径一样。利用 HTML5 History API，更美观，但需要后端配合。如果后端不配置 fallback 到
index.html，刷新页面会出现 404。
Q2：如何解决 SPA 应用首屏加载过慢的问题？
参考回答：
- 路由懒加载：将不同页面拆分成小的 JS 包，只有访问时才加载。
- Gzip 压缩：在服务器端开启压缩，大幅减小 JS 体积。
- 使用 CDN：将大库（如 Vue/React）通过 CDN 加载。
- SSR（服务端渲染） ：提前在服务器生成 HTML，加快首屏呈现。
