本文已参与掘金创作者训练营第三期「话题写作」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力。
什么是 SPA？
SPA 即为 single page application 的缩写，意为单页面应用，其作为一种网页应用模型。
简单来说，就是在同一个页面，通过 ajax 更新部分内容而非整个页面重新载入，达到较好的使用体验，并且可以节省网站资源。
只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源 ，公共资源(js、css等)仅需加载一次，常用于PC端官网、购物等网站。
原理
js会感知到url的变化，通过这一点可以用js动态地将当前页面的内容清除，然后将下一个页面的内容挂载到当前页面上。这个时候的路由不再是后端来做了，而是前端来做，判断页面显示相应的组件，清除不需要的。
优点
页面切换快。
因为页面每次切换跳转时，并不需要处理 html 文件的请求，这样就节约了很多 HTTP 请求所花费的时间，所以我们在切换页面的时候，速度很快。
缺点
首屏时间稍慢，SEO差。
单页应用的首屏时间慢，首屏时需要请求一次html，同时还要发送一次js请求，两次请求回来了，首屏才会展示出来。相对于多页面应用，首屏时间慢。
SEO效果差，因为搜索引擎只认识html里的内容，不认识js渲染生成的内容，搜索引擎不识别，也就不会给一个好排名，会导致单页应用做出来的网页在搜索引擎上的排名差。
什么是 MPA？
MPA 即为 multiple page application 的缩写，意为多页面应用模型，与 SPA 对比最大的不同即是页面路由切换由原生浏览器文档跳转（navigating across documents）控制。
页面跳转，是返回 HTML 的。
优点
多页面应用的首屏时间快。
当我们访问页面的时候，服务器返回一个html，页面就会展示出来，这个过程只经历了一个HTTP请求，所以页面展示的速度非常快。
搜索引擎优化效果好（SEO）
搜索引擎在做网页排名的时候，要根据网页的内容才能给网页权重，来进行网页的排名。搜索引擎是可以识别html内容的，而我们每个页面所有的内容都放在html中，所以这种多页应用SEO排名效果好。
缺点
切换慢
因为每次跳转都需要发送一个 HTTP 请求，如果网络状态不好，在页面之间来回跳转时，就会发生明显的卡顿，影响用户体验。
SPA 和 MPA 的区别？
两者的对比分析，如下表
| 单页面应用（SinglePage Web Application，SPA） | 多页面应用（MultiPage Application，MPA） |
|---|
| 组成 | 一个外壳页面和多个页面片段组成 | 多个完整页面构成 |
| 跳转方式 | 一个页面片段删除或隐藏，加载另一个页面片段并显示。片段间的模拟跳转，没有离开外壳页面 | 页面之间的跳转是从一个页面到另一个页面 |
| 资源共用(css和js) | 共用，只需在外壳部分加载 | 不共用，每个页面都需要加载 |
| 刷新方式 | 页面局部刷新或更改 | 整页刷新 |
| url 模式 | a.com/#/pageone
a.com/#/pagetwo | a.com/pageone.html
a.com/pagetwo.html |
| 用户体验 | 页面片段间的切换快，用户体验良好，包括移动设备 | 页面切换加载缓慢，流畅度不够，用户体验比较差，尤其是在移动端 |
| 转场动画 | 容易实现 | 无法实现 |
| 页面间数据传递 | 容易（Vuex 或者 Vue 中的父子组件通信） | 相对麻烦，依赖 url传参、或者cookie 、localStorage等 |
| 搜索引擎优化(SEO) | 需要单独方案、实现较为困难、不利于SEO检索 可利用服务器端渲染(SSR)优化 | 可以直接做 |
| 适用范围 | 高要求的体验度、追求界面流畅的应用 | 适用于追求高度支持搜索引擎的应用 |
| 开发成本 | 较高，常需借助专业的框架来降低这种模式的开发难度 | 较低 ，但页面重复代码多 |
| 维护成本 | 相对容易 | 相对复杂 |
参考&学习
文中如有错误，欢迎在评论区指正，如果这篇文章帮助到了你或者喜欢，欢迎点赞和关注。