SPA&MPA

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),通过这些技术可以完美解决这些缺点,解决完这些问题,实际上单页面应用对于前端来说是非常完美的页面开发解决方案。

多页应用模式MPA单页应用模式SPA
应用构成由多个完整页面构成一个外壳页面和多个页面片段构成
跳转方式页面之间的跳转是从一个页面跳转到另一个页面页面片段之间的跳转是把一个页面片段删除或隐藏,加载另一个页面片段并显示出来。这是片段之间的模拟跳转,并没有开壳页面
跳转后公共资源是否重新加载
URL模式http://xxx/page1.html 和 http://xxx/page2.htmlhttp://xxx/shell.html#page1 和 http://xxx/shell.html#page2
用户体验页面间切换加载慢,不流畅,用户体验差,特别是在移动设备上页面片段间的切换快,用户体验好,包括在移动设备上
能否实现转场动画无法实现容易实现(手机app动效)
页面间传递数据依赖URL、cookie或者localstorage,实现麻烦因为在一个页面内,页面间传递数据很容易实现(这里补充,父子之间传值,或vuex或storage之类)
搜索引擎优化(SEO)可以直接做需要单独方案做,有点麻烦
特别适用的范围需要对搜索引擎友好的网站对体验要求高的应用,特别是移动应用
开发难度低一些,框架选择容易高一些,需要专门的框架来降低这种模式的开发难度
  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值