【Vue.js】SPA

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模式	http://xxx/page1.html --> http://xxx/page2.html	http://xxx/shell.html#page1 --> http://xxx/shell.html#page2
用户体验	页面间切换加载慢，用户体验差，尤其在移动端	页面片段间切换快，用户体验好，包括移动设备
能否实现转场动画	否	容易实现（手机APP动效）
页面间传递数据	依赖URL、cookies或者localstorage，实现麻烦	页面传递数据容易（Vuex或Vue中的父子组件通讯props对象）
搜索引擎优化（SEO）	可以直接做	需要单独方案SSR
特别适用范围	需要对搜索引擎友好的网站	对用户体验要求高，特别是移动应用
开发难度	较低，大部分JS框架适用	较高，需要特定JS框架