什么是单页面,什么是多页面,单页面和多页面的区别

SPA单页面应用:指只有一个主页面的应用,一开始只需要加载一次css、js等相关资源。所有内容都包含在主页面,对每一个功能模块组件化。单页面应用跳转,就是切换相关组件,仅仅只是刷新局部资源

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

区别:

1.刷新方式

  • SPA:相关组件的切换,页面局部刷新或者更改
  • MPA:整页刷新

2.路由模式

  • SPA:可以使用hash,也可以使用history
  • MAP:普通的链接跳转

3.用户体验

  • SPA:用户体验良好,切换页面知识局部刷新组件。因为是一次性加载所有资源,所以说首次进入的时候可能会有一段时间的白屏
  • MPA:页面切换加载缓慢,流畅度不够,用户体验是比较差的

4.专场动画

  • SPA:容易实现专场动画。
  • MPA:无法实现专场动画。

5.数据传递问题

  • SPA:容易传递数据,方法有很多,比如Vuex
  • MPA:传递数据不方便,一般用url/cookie/本地存储

6.搜索引擎优化(SEO)

  • SPA:需要单独方案,实现比较困难
  • MPA:实现方法容易

7.使用范围

  • SPA:高要求的体验度,追求页面的流畅
  • MPA:使用于追求高度支持搜索引擎的应用

8.开发成本

  • SPA:较高,因为需要借助框架。
  • MPA:较低,但是代码比较多

9.维护成本

  • SPA:比较低
  • MPA:比较高

10.结构

  • SPA:一个主页面+许多模块组件
  • MPA:许多完整的页面

11.资源文件

  • SPA:组件公用的资源文件只需加载一次
  • MPA:每个页面都需要加载自己的资源

猜你喜欢

转载自blog.csdn.net/weixin_42901443/article/details/130473098