【Vue.js】SPA

SPA

---

2019-11-13  23:20:48  by冲冲

 

一、概念

（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）

 

二、比较

	多页面应用模式（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框架