SPA
2019-11-13 23:20:48 by冲冲
1、概念
（1）MPA（multi-page application）
特点：每一次页面跳转的时候，后台服务器都会返回一个新的html文档，这种类型的网站就是多页网站，也叫多页应用。
（2）SPA（single-page application）
① 原理：第一次进入页面时就会加载相应的HTML、JavaScript 和 CSS，需要切换内容时，通过JavaScript感知url变化，更换当前页面内容，但是并没有新的html文件请求。此时路由不再是后端做，而是前端做。
② 页面跳转：js渲染
③ 优点：
A. 页面切换快。前端局部渲染。
B. 减轻服务器压力。服务器前期发送静态资源（html、css、js）到浏览器，往后通过RESTful API提供接口数据，并使用Ajax异步获取，实现前后端分离。
C. 不用修改后端程序代码（API接口）就可以同时用于web界面、手机、平板等多种客户端。
④ 缺点：
A. 首屏时间慢。首屏时不仅需要请求一次html，同时还要发送一次js请求，两次请求回来了，首屏才会展示出来。相对于多页面应用只需要发送一次html，SPA首屏时间慢。
B. SEO差。因为搜索引擎只认识html里的内容，不认识js渲染生成的内容，搜索引擎不识别，也就不会给一个好排名，会导致单页应用做出来的网页在搜索引擎上的排名差。（解决方案：vue的SSR）
2、比较
| 多页面应用模式（MPA） | 单页面应用模式（SPA） | |
| 应用构成 | 由多个完整页面构成 | 一个外壳页面和多个页面片段构成 |
| 跳转方式 | 页面之间的跳转是从一个页面到另一个页面 | 一个页面片段删除或隐藏，加载另一个页面片段并显示 |
| 跳转后公共资源是否重新加载 | 是 | 否 |
| URL模式 |
|
|
| 用户体验 | 页面间切换加载慢，用户体验差，尤其在移动端 | 页面片段间切换快，用户体验好，包括移动设备 |
| 能否实现转场动画 | 否 | 容易实现（手机APP动效） |
| 页面间传递数据 | 依赖URL、cookies或者localstorage，实现麻烦 |
页面传递数据容易（Vuex或Vue中的父子组件通讯props对象） |
| 搜索引擎优化（SEO） | 可以直接做 | 需要单独方案SSR |
| 特别适用范围 | 需要对搜索引擎友好的网站 | 对用户体验要求高，特别是移动应用 |
| 开发难度 | 较低，大部分JS框架适用 | 较高，需要特定JS框架 |