前端单页应用与多页应用的区别

1.传统网页应用与单页应用区别
传统网页：

 
 单页应用：

 
 2.  具体区别
定义：
SPA单页面应用：指只有一个主页面的应用，一开始只需要加载一次css、js等相关资源，所有内容都包含在主页面，对每一个功能模块组件化。单页面应用跳转，就是切换相关组件，仅仅只是刷新局部资源。
MPA多页面应用：指有多个独立页面的应用，每个页面都必须重复加载js、css等相关资源。多页面应用跳转，需要整页资源刷新。
区别：
 1.  刷新方式
SPA：相关组件的切换，业界局部刷新或更改。
MPA：整页刷新
2.路由模式
SPA：可以使用has，也可以使用history
MPA:整页刷新
3.用户体验
SPA：用户体验良好，切换页面只是局部组件刷新。因为一次性加载所有资源，所以说首次进入的时候可能会有一段时间白屏。
MPA：页面切换加载缓慢，流畅度不够，用户体验差一点。
4.转场动画
SPA：容易实现转场动画，比如界面切换之类加一些骨架屏和loading之类的。
MPA：无法实现转场动画，每次切换都是白屏。
5.数据传递问题
SPA：容易传递数据，方法有很多，比如Vuex
MPA:传递数据不方便，一般用url、cookie、本地存储
6.搜索引擎优化（SEO）
SPA：需要单独方案，实现比较困难
MPA：实现方法容易
7.使用范围
SPA：高要求的体验度，追求页面的流畅
MPA：适用于追求高度支持搜索引擎的应用
8.开发成本和维护成本
SPA：开发成本高，因为要借助框架，维护成本低一些
MPA：开发成本低，用原生的js和htm写，代码较多，维护成本高一些
 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！