SPA(单页面应用)和MPA(多页面应用)


单页面应用

第一次进入页面时会请求一个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.htmlhttp://xxx/page2.html http://xxx/shell.html#page1http://xxx/shell.html#page2
用户体验页面间切换加载慢,不流畅,用户体验差,尤其在移动端页面片段间切换快,用户体验好,包括移动设备
能否实现转场动画容易实现(手机APP动效)
页面间传递数据依赖URLcookie或者localstorage,实现麻烦页面传递数据容易(VuexVue中的父子组件通讯props对象)
搜索引擎优化(SEO)可以直接做需要单独方案(SSR)
特别适用的范围需要对搜索引擎友好的网站对体验要求高,特别是移动应用
开发难度较低,框架选择容易较高,需要专门的框架来降低这种模式的开发难度
### SPA单页面应用与传统多页应用的区别 #### 页面加载机制 在传统的多页面应用程序(MPA)中,每次导航至新页面都会向服务器发起请求并重新加载整个HTML文档,这包括重复加载公共的CSS、JavaScript文件等资源[^3]。而在单页面应用(SPA)里,初次访问时会下载必要的静态资源,在之后的交互过程中仅获取所需的数据并通过JavaScript动态修改DOM结构而不必重载页面。 #### 用户体验差异 由于SPA减少了不必要的全量刷新操作,因此能够提供更加流畅自然的操作感受,类似于本地桌面软件或移动APP的感觉;相比之下,MPA可能会因为频繁的整体页面切换而显得不够连贯顺畅[^1]。 #### 性能表现对比 一方面,SPAs可以在首次加载完成后缓存大部分甚至全部所需的前端资产(如图片、样式表),从而加快后续视图间的转换速度。另一方面,如果处理不当,则可能导致初始渲染时间过长以及内存占用过高问题。相反地,尽管MPAs可能面临更多的网络延迟开销,但在某些情况下反而更有利于SEO优化即时可用性[^4]。 ### 优缺点总结 #### 单页面应用(SPA) - **优点** - 更好的用户体验:无感知的内容变化让用户感觉像是在一个连续界面上浏览。 - 减少了HTTP请求数目:除了第一次加载外,其他时候只需交换少量数据即可完成界面更新。 - **缺点** - 初次加载较慢:所有必需脚本一次性被拉取下来增加了首屏显示的时间成本。 - SEO挑战较大:搜索引擎爬虫难以抓取AJAX异步加载出来的内容除非采用服务端预渲染技术。 #### 多页面应用(MPA) - **优点** - 易于实现服务端集成:遵循标准web开发流程易于维护支持传统后端框架。 - 对搜索引擎友好:每一页都是独立URL容易被抓取索引利于推广传播。 - **缺点** - 较差的响应效率:每一次点击链接都需要经历完整的生命周期过程造成一定等待感。 - 资源浪费严重:相同部分会被多次传输给客户端增加带宽压力。 ```javascript // 示例代码展示如何创建简单的Vue.js SPAs路由配置 const routes = [ { path: '/', component: HomeComponent }, { path: '/about', component: AboutComponent } ]; const router = new VueRouter({ mode: 'history', routes }); new Vue({ el: '#app', router, }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值