本文已参与掘金创作者训练营第三期「话题写作」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力
单页面模式（SPA，Single-Page Application）
spa是单页面应用，就是请求的内容只占该页面的一小部分，其他大部分都是相同的内容。那么页面的公共资源不会被重新加载，只会加载不同的部分，节省浏览器资源。通常是配合vue-router使用，vue-router会帮助我们对路由进行配置。
原理
js会感知到url的变化，通过这一点可以用js动态地将当前页面的内容清除，然后将下一个页面的内容挂载到当前页面上。这个时候的路由不再是后端来做了，而是前端来做，判断页面显示相应的组件，清除不需要的。
单页面应用的优点是页面切换快。页面每次切换跳转时，并不需要处理HTML文件的请求，这样节约了很多HTTP发送时延，所以我们在切换页面的时候速度很快
缺点是首屏时间稍慢，SEO差。因为首屏时需要请求一次HTML，同时还需要发送一次js请求，两次请求回来了，首屏才会展示出来，相对于多页面应用，首屏时间稍慢。
SEO效果差是因为搜索引擎只认识HTML里面的内同，不认识js渲染生成的内容，所搜引擎不识别，也就不会给一个好的排名，会导致单页面应用做出来的网页在搜索引擎上的排名差。
多页面模式（MPA，Multi-Page Application）
mpa就是多页面应用，我们最开始学习前端用到的模式，每一次页面发生跳转的时候都会刷新整个页面，如果是线上的项目，那么就是服务器返回一个新的html文档，这种类型的的网站也叫做多页网页
多页面应用的优点就是首屏时间快，SEO效果好；首屏时间就是页面首次加载呈现在用户显示器上内容的时间，当我们访问页面的时候，服务器返回一个html，页面就会展示出来，这个过程只经历了一个http请求，所以展示的速度比单页面应用快
缺点就是网页切换慢，每次跳转都需要发送一个http请求，如果网络状态不好，在页面间来回跳转时，就会发生明显的卡顿，影响用户体验。
总结
| / | 单页面应用（SPA） | 多页面应用（MPA） |
|---|---|---|
| 应用构成 | 一个外壳页面和多个页面片段构成由 | 多个完整页面构成 |
| 跳转方式 | 一个页面片段删除或隐藏，加载另一个页面片段并显示。片段间的模拟跳转，没有离开外壳页面 | 页面之间的跳转是从一个页面到另一个页面 |
| 跳转后公共资源是否重新加载 | 否 | 是 |
| URL模式 | http://xxx/shell.html#page1和http://xxx/pshell.html#page2 | http://xxx/page1.html和http://xxx/page2.html |
| 用户体验 | 页面片段切换快，用户体验好，包括移动设备 | 页面间切换加载慢，不流畅，用户体验差，尤其在移动端 |
| 能否实现转场动画 | 容易实现 | 否 |
| 页面间传递数据 | 页面传递数据容易（vuex或vue中的父子组件通讯） | 依赖URL、cookie或者localstorage，相对麻烦 |
| 搜索引擎优化（SEO） | 需要单独方案（SSR） | 可以直接做 |
| 特别适用的范围 | 对体验要求高，特别是移动端 | 需要对搜索引擎友好的网站 |
| 开发难度 | 较高，需要专门的框架来降低这种模式的开发难度 | 较低，框架选择容易 |
