单页应用和多页应用

多页面应用

一个项目是由多个完整的html页面组成，

每一次页面跳转的时候，后台服务器都会给返回一个新的HTML文档，页面跳转全部的资源都要从新加载，页面之间的切换会出现卡顿空白的问题，不容易实现切换动画等。这种类型的网站也就是多页网站，也叫作多页应用。

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

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

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

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

可是它也有缺点，就是切换慢

由于每次跳转都须要发出一个http请求，若是网络比较慢，在页面之间来回跳转时，就会发现明显的卡顿。

 

单页面应用

一个项目中只有一个完整的html页面，其余的都是部分的html片断组成。页面跳转只是局部刷新，不会从新加载所有资源。片断之间的切换快，比较容易实现转场动画。

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

 

原理是：JS会感知到url的变化，经过这一点，能够用js动态的将当前页面的内容清除掉，而后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来作了，而是前端来作，判断页面究竟是显示哪一个组件，清除不须要的，显示须要的组件。这种过程就是单页应用，每次跳转的时候不须要再请求html文件了。

 

为何页面切换快？

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

缺点：首屏时间慢，SEO差

单页应用的首屏时间慢，首屏时须要请求一次html，同时还要发送一次js请求，两次请求回来了，首屏才会展现出来。相对于多页应用，首屏时间慢。
SEO效果差，由于搜索引擎只认识html里的内容，不认识js的内容，而单页应用的内容都是靠js渲染生成出来的，搜索引擎不识别这部份内容，也就不会给一个好的排名，会致使单页应用作出来的网页在百度和谷歌上的排名差。

有这些缺点，为何还要使用Vue呢？

Vue还提供了一些其它的技术来解决这些缺点，好比说服务器端渲染技术(我是SSR)，经过这些技术能够完美解决这些缺点，解决完这些问题，实际上单页面应用对于前端来讲是很是完美的页面开发解决方案。

单页面VS多页面

 

mm	多页应用模式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或storage之类)
搜索引擎优化（SEO）	能够直接作	须要单独方案作，有点麻烦
特别适用的范围	须要对搜索引擎友好的网站	对体验要求高的应用，特别是移动应用
搜索引擎优化（SEO）	能够直接作	须要单独方案作，有点麻烦
开发难度	低一些，框架选择容易	高一些，须要专门的框架来下降这种模式的开发难度

 

 

原文出处：https://www.cnblogs.com/ranyonsue/p/10115297.html