- 链接：页面结构
误区
- 页面结构管理有两种常见方式：路由形式 和 组件形式。
路由形式 对应MPA ，组件形式对应SPA❌
- 误区 1：路由形式 = MPA❌
路由是 SPA 和 MPA 共有的概念，区别在于路由映射的对象：
MPA 的路由映射独立 HTML 页面，依赖服务端跳转；
SPA 的路由映射前端组件 / 视图，依赖前端 JS 动态渲染。
正确表述：
MPA 是 “服务端路由 + 多 HTML 页面” 的组合；
SPA 是 “前端路由 + 单 HTML 页面 + 组件化” 的组合。 - 误区 2：组件形式 = SPA❌
组件化是一种开发模式，与应用是单页还是多页无关。
MPA 完全可以使用组件化开发（如通过模板引擎复用组件），只是组件的作用范围限于单个页面，跨页面复用需手动处理（如复制粘贴或全局 JS 挂载）。
正确表述：
SPA必须依赖组件化来实现高效的局部更新；
MPA可以选择组件化来提升开发效率，但非强制要求。- 总结
- 总结
对比
单页应用 Single Page Application
多页应用 Multi-Page Application
| SPA | MPA | |
|---|---|---|
| 页面数量 | 1 个主 HTML 页面，通过组件动态渲染内容 | 多个独立 HTML 页面，每个页面独立加载 |
| 路由核心 | 前端路由（JS 控制 URL 与组件的映射） | 服务端路由（服务器返回不同 HTML 文件） |
| 组件化程度 | 强依赖（视图层完全由组件构成） | 可选（依赖模板引擎或前端框架实现） |
| 交互体验 | 无刷新，局部更新 | 全页刷新，跳转时有延迟 |
| 开发模式 | 前端主导（需掌握路由、状态管理等） | 服务端主导（HTML/CSS/JS 相对独立） |
| 优点 | 用户体验流畅；开发效率高； 资源利用率高；适合移动应用 |
SEO 友好；首屏加载快；开发简单直接；容错性强； |
| 缺点 | 首屏加载慢；SEO 困难； 技术复杂度高；浏览器兼容性差 |
用户体验差；资源重复加载； 维护成本高；数据共享困难 |
| 应用场景 | 应用需高频交互（如表单、实时数据），且用户使用现代浏览器。 团队熟悉前端工程化（如 Webpack、TypeScript）。 对 SEO 要求不高（如企业内部系统、工具类应用）。 |
网站以内容展示为主，需良好 SEO（如电商商品页、新闻资讯）。 开发资源有限，需快速上线（如活动页、小型官网）。 目标用户使用老旧浏览器（如 IE9 以下）或网络环境差。 |
- 优缺点详细展开
- SPA
- 用户体验流畅 ：无需刷新页面，通过 AJAX/Fetch 动态加载数据，交互响应速度快，适合高频操作（如表单、实时数据更新）。
- 开发效率高：组件化开发（如 React/Vue）可复用性强，减少重复代码；前后端分离，团队分工清晰。
- 资源利用率高：首次加载后，仅需更新变化的组件和数据，减少重复请求（如导航栏、footer 全局复用）。
- 适合移动应用：可封装为 PWA（渐进式 Web 应用），提供类似原生 APP 的体验（离线支持、推送通知）。
- 首屏加载慢：需加载完整 JS/CSS 包，若未优化（如代码分割、懒加载），可能导致白屏时间过长。解决方法：使用 SSR/SSG（如 Next.js、Nuxt.js）预渲染关键页面。
- SEO 困难：内容由 JS 动态渲染，搜索引擎爬虫难以抓取（如 Google Gmail 在爬虫眼中是空白页面）。解决方法：结合 SSR / 预渲染，或使用 Google 的 AJAX 爬取协议。
- 技术复杂度高：需要掌握前端路由、状态管理（如 Redux）、异步处理等复杂概念，学习曲线陡峭。
- 浏览器兼容性差：依赖 HTML5 History API 和现代 JS 特性（如 Promise），对 IE 等老旧浏览器支持有限。 解决方法：使用 polyfill（如 ES6-Shim）或降级方案。
- MPA
- SEO 友好：每个页面都是完整 HTML，内容直接可见于源代码，搜索引擎可直接抓取（如新闻网站、博客）。
- 首屏加载快 ：按需加载单个页面资源，无需等待整体 JS/CSS 加载，适合网络环境差的场景（如移动端网页）。
- 开发简单直接 ：无需复杂的前端工程化配置，适合小团队或快速原型开发（如使用 PHP+jQuery）。
- 容错性强：单个页面崩溃不影响其他页面，用户可继续访问其他功能。
- 用户体验差 ：页面跳转时需全页刷新，导致 “闪烁感”，尤其在移动端体验不佳（如传统 MPA 电商的购物车操作）。
- 资源重复加载 ：每个页面都需加载独立的 CSS/JS（如多个页面共用的导航栏组件需重复加载），浪费带宽。
- 维护成本高 ：多页面代码冗余（如每个页面都需维护导航栏逻辑），修改全局样式需逐个页面调整。
- 数据共享困难： 跨页面数据传递需依赖 Cookie/LocalStorage 或服务端 Session，实现复杂。
- SPA
- 总结
路由形式是 SPA 和 MPA 共有的管理方式，但SPA 的路由管理前端组件，MPA 的路由管理后端页面——前者在一个页面内用组件切换实现导航，后者通过服务器返回不同页面实现导航。