SPA&MPA_mpa和spa

MPA

一、什么是MPA?

多页应用MPA（MultiPage-page application），翻译过来就是多页应用在MPA中，每个页面都是一个主页面，都是独立的当我们在访问另一个页面的时候，都需要重新加载html、css、js文件。
每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页应用。

二、MPA的优缺点

优点：

首屏时间快，SEO效果好

缺点：

页面切换慢

Why?

1、为什么多页应用的首屏时间快？
首屏时间叫做页面首个屏幕的内容展现的时间，当我们访问页面的时候，服务器返回一个html，页面就会展示出来，这个过程只经历了一个HTTP请求，所以页面展示的速度非常快。
2、为什么搜索引擎优化效果好（SEO）？
搜索引擎在做网页排名的时候，要根据网页内容才能给网页权重，来进行网页的排名。搜索引擎是可以识别html内容的，而我们每个页面所有的内容都放在Html中，所以这种多页应用，seo排名效果好。
3、但是它也有缺点，就是切换慢
因为每次跳转都需要发出一个http请求，如果网络比较慢，在页面之间来回跳转时，就会发现明显的卡顿。

SPA

一、什么是SPA?

SPA（single-page application），单页应用SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载，也不会将控制转移到其他页面。
通俗的来讲——单页面应用在第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也会相应变化，但是并没有新的html请求，页面内容变化了。原理是：JS会感知到url的变化，通过这一点，可以使用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候路由不是由后端来做了，而是前端来做，判断页面到底显示哪一个组件，清楚不需要的，显示需要的组件，这种过程就是单页应用，每次跳转的时候不需要再请求html文件了。

二、SPA的优缺点

优点：

1、页面切换快，用户体验好，内容的改变不需要重新加载整个页面
2、具有桌面应用的即时性、网站的可移植性和可访问性
3、良好的前后端分离，分工更明确

缺点：

1、首次渲染速度相对较慢
2、不利于搜索引擎的抓取，SEO差

Why?

1、为什么页面切换快？ 页面每次切换跳转的时候，并不需要html文件的请求，这样就节约了很多http发送时延，我们在切换页面的时候速度很快。
2、缺点：首屏时间慢，SEO差
单页应用的首屏时间慢，首屏时需要请求一次html，同时还要发送一次js请求，两次请求回来了，首屏才会展示出来。相对于多页面应用，首屏时间慢，SEO效果差，因为搜索引擎只认识html里的内容，不认识js的内容，而单页面应用的内容都是靠js渲染生成出来的，搜索引擎不识别这部分内容，也就不会给一个好的排名，会导致单页面应用做出来的网页在百度和谷歌上的排名差。
3、有这些缺点，为什么还要使用Vue呢？
Vue还提供了一些其他的技术来解决这些缺点，比如说服务器渲染技术（SSR），通过这些技术可以完美解决这些缺点，解决完这些问题，实际上单页面应用对于前端来说是非常完美的页面开发解决方案。