SPA单页面应用和MPA多页面应用（转）

原文：https://www.jianshu.com/p/a02eb15d2d70

 

 

单页面应用

第一次进入页面时会请求一个html文件，刷新清除一下，切换到其余组件，此时路径也相应变化，可是并无新的html文件请求，页面内容却变化了。

原理： js会感知到url的变化，经过这一点能够用js动态地将当前页面的内容清除，而后将下一个页面的内容挂载到当前页面上。这个时候的路由再也不是后端来作了，而是前端来作，判断页面显示相应的组件，清除不须要的。

页面跳转： js渲染
优势： 页面切换快
缺点： 首屏时间稍慢，SEO差

1. 为何页面切换快？

页面每次切换跳转时，并不须要处理html文件的请求，这样就节约了不少HTTP发送时延，因此咱们在切换页面的时候速度很快。

2. 为何首屏时间慢，SEO 差？

单页应用的首屏时间慢，首屏时须要请求一次html，同时还要发送一次js请求，两次请求回来了，首屏才会展现出来。相对于多页面应用，首屏时间慢。

SEO效果差，由于搜索引擎只认识html里的内容，不认识js渲染生成的内容，搜索引擎不识别，也就不会给一个好排名，会致使单页应用作出来的网页在搜索引擎上的排名差。

3. 为何还要用 Vue 呢？

Vue官方提供了一些其余的技术来解决这些缺点，好比服务端渲染技术（SSR），经过这些技术能够完美解决这些缺点，这样一来单页面应用对于前端来讲就是很是完美的页面开发解决方案了。

---

多页面应用

每一次页面跳转的时候，后台服务器都会返回一个新的html文档，这种类型的网站也就是多页网站，也叫多页应用。

页面跳转： 返回HTML
优势： 首屏时间快，SEO效果好
缺点： 页面切换慢

1. 为何多页应用的首屏时间快？

首屏时间叫作页面首个屏幕的内容展示的时间，当咱们访问页面的时候，服务器返回一个html，页面就会展现出来，这个过程只经历了一个HTTP请求，因此页面展现的速度很是快。

2. 为何搜索引擎优化效果好（SEO）？

搜索引擎在作网页排名的时候，要根据网页的内容才能给网页权重，来进行网页的排名。搜索引擎是能够识别html内容的，而咱们每一个页面全部的内容都放在html中，因此这种多页应用SEO排名效果好。

3. 缺点：切换慢

每次跳转都须要发送一个HTTP请求，若是网络状态很差，在页面间来回跳转时，就会发生明显的卡顿，影响用户体验。

---

总结

/	多页面应用模式MPA	单页面应用模式SPA
应用构成	由多个完整页面构成	一个外壳页面和多个页面片断构成
跳转方式	页面之间的跳转是从一个页面到另外一个页面	一个页面片断删除或隐藏，加载另外一个页面片断并显示。片断间的模拟跳转，没有开壳页面
跳转后公共资源是否从新加载	是	否
URL模式	http://xxx/page1.html和http://xxx/page2.html	http://xxx/shell.html#page1和http://xxx/shell.html#page2
用户体验	页面间切换加载慢，不流畅，用户体验差，尤为在移动端	页面片断间切换快，用户体验好，包括移动设备
可否实现转场动画	否	容易实现（手机APP动效）
页面间传递数据	依赖URL、cookie或者localstorage，实现麻烦	页面传递数据容易（Vuex或Vue中的父子组件通信props对象）
搜索引擎优化（SEO）	能够直接作	须要单独方案（SSR）
特别适用的范围	须要对搜索引擎友好的网站	对体验要求高，特别是移动应用
开发难度	较低，框架选择容易	较高，须要专门的框架来下降这种模式的开发难度