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