首页> web前端> Vue.js> 正文

vue中什么是SPA和MPA?两者有什么差异?

青灯夜游
发布: 2021-11-11 19:15:58
转载
4446 人浏览过

本篇文章给大家介绍一下vue的单页面(SPA)和多页面(MPA),看看SPA和MPA的区别,希望对大家有所帮助!

vue中什么是SPA和MPA?两者有什么差异?

什么是SPA

SPA全称Single Page Application,即单页面应用。一般也称为CSR(Client Side Render),即客户端渲染。它所需的资源,如 HTML、CSS 和 JS 等,在一次请求中就加载完成,也就是不需刷新地动态加载。浏览器(Client)渲染顾名思义就是所有的页面渲染、逻辑处理、页面路由、接口请求均是在浏览器中发生。对于 SPA 来说,页面的切换就是组件或视图之间的切换。【相关推荐:《vue.js教程》】

简单来说,SPA应用程序只有一个html文件,在vue中可以通过vue-router来局部切换组件,而非刷新整个页面,来实现无刷新切换页面的技术

SPA应用程序避免了由于在服务器上呈现页面而导致的中断。 这消除了 Web 开发世界在提供无缝用户体验方面通常面临的最大问题。

1.png

SPA的原理

js会感知到url的变化,通过这一点可以用js监听url中hash值的变化,通过onhashchange事件,由于哈希值的变换并不会引发页面的刷新和跳转,当监听到hash变化,就可以动态的切换组件,就可以实现无刷新切换页面技术

  • 注意. 在vue-router中 vue不支持onhashchange事件,它希望你使用vue-router中的钩子函数解决

SPA的优点

  • 1.页面切换快

页面每次切换跳转时,并不需要做html文件的请求,这样就节约了很多http发送时延,我们在切换页面的时候速度很快。

  • 2.用户体验好

页面片段间的切换快,包括移动设备, 尤其是在网络环境差的时候, 因为组件已经预先加载好了, 并不需要发送网络请求, 所以用户体验好

SPA的缺点

  • 1.首屏加载速度慢

首屏时需要请求一次html,同时还要发送一次js请求,两次请求回来了,首屏才会展示出来。相对于多页应用,首屏时间慢。

  • 2.不易于SEO

SEO效果差,因为搜索引擎只认识html里的内容,不认识js的内容,而单页应用的内容都是靠js渲染生成出来的,搜索引擎不识别这部分内容,也就不会给一个好的排名,会导致SPA应用做出来的网页在百度和谷歌上的排名差。

什么是MPA

MPA多页面应用MultiPage Application,指有多个独立页面的应用(多个html页面),每个页面必须重复加载js、css等相关资源。多页应用跳转,需要整页资源刷新。

SPA对比最大的不同即是页面路由切换由原生浏览器文档跳转(navigating across documents)控制。 页面跳转,是返回 HTML 的。

2.png

MPA的优点

  • 1.首屏加载速度快

当我们访问页面的时候,服务器返回一个html,页面就会展示出来,这个过程只经历了一个HTTP请求,所以页面展示的速度非常快。

  • 2.SEO效果好

搜索引擎在做网页排名的时候,要根据网页的内容才能给网页权重,来进行网页的排名。搜索引擎是可以识别html内容的,而我们每个页面所有的内容都放在html中,所以这种多页应用SEO排名效果好。

MPA的缺点

  • 1.页面切换慢

因为每次跳转都需要发送一个 HTTP 请求,如果网络状态不好,在页面之间来回跳转时,就会发生明显的卡顿,影响用户体验。

  • 2.用户体验不佳

如果网络慢,页面很容易半天加载不出来,用户体验非常不好

为什么要使用SPA应用开发

通过上面的分析,我们不难发现,SPA和MPA各有优缺点,那我们为什么还要开发SPA呢,其实,Vue还提供了一些其它的技术来解决这些缺点,比如说服务器端渲染技术(SSR),通过这些技术可以完美解决这些缺点,解决完这些问题,实际上单页面应用对于前端来说是非常完美的页面开发解决方案。

SPA和MPA对比

  • 两者的对比分析,如下表

3.png

以上是vue中什么是SPA和MPA?两者有什么差异?的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:juejin.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn