单页面应用和多页面应用的区别对比

Posted little小龙女

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了单页面应用和多页面应用的区别对比相关的知识,希望对你有一定的参考价值。

单页面应用

一个项目中只有一个完整的html页面,其他的都是部分的html片段组成。页面跳转只是局部刷新,不会重新加载全部资源。片段之间的切换快,比较容易实现转场动画。

多页面应用

一个项目是由多个完整的html页面组成,页面跳转所有的资源都要重新加载,页面之间的切换会出现卡顿空白的问题,不容易实现切换动画等l

单页面VS多页面

单页面应用(SPA) 多页面应用(MPA)
组成 一个外壳页面和多个片段页面组成 多个完成的html页面组成
页面跳转 仅片段页面之间的切换,共用外壳页面 从一个完整的页面跳转到另外一个完整页面
刷新方式 页面片段的局部刷新 整页刷新
url模式 a.com#pageone a.com/pageone.html
用户体验 页面间片段切换快,用户体验好 页面间切换慢,不流畅,用户体验差
转场动画 容易实现转场动画 不容易实现转场动画
页面间数据传递 依赖url,cookie,localStorage等,实现麻烦 因为在一个页面内,页面片段间传递数据容易
搜索引擎优化 需要单独方案,实现较为困难,不利于SEO检索 直接可以实现,比较容易实现
使用范围 高要求的体验度,追究界面流畅的应用 适用追求高支持度的SEO的应用
开发成本 较高,需要借助专业的框架 较低,但是页面重复代码比较多
维护成本 相对容易 想多复杂

以上是关于单页面应用和多页面应用的区别对比的主要内容,如果未能解决你的问题,请参考以下文章

浅析:单页应用(SPA)和多页应用(MPA)的区别

浅析:单页应用(SPA)和多页应用(MPA)的区别

单页面应用和多页面应用对比分析

前端:单页面应用和多页面应用

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

单页面和多页面的 区别