多页应用模式(MPA)
页面A:http://xxx/pageA.html
页面B:http://xxx/pageB.html
页面A 跳转到页面B 整页刷新
单页面应用模式(SPA)
页面page:http://xxx/page.html,页面内局部#page1与#page2之间跳转局部刷新
多页应用与单页应用的对比
多页应用MPA | 单页应用SPA | |
应用组成 | 由多个完整页面构成 | 一个外壳页面和多个页面片段构成 |
跳转方式 | 从一个页面到另外一个页面跳转 | 页面片段之间的跳转是把一个页面片段元素删除或者隐藏,加载另一个页面片段并且显示出来。这是片段之间的模拟跳转,并没有离开本身的外壳页面 |
刷新方式 | 整页刷新 | 页面片段局部刷新 |
跳转后公共资源是否重新加载 | 是 | 否 |
url模式 | http://xxx/pageA.html http://xxx/pageB.html |
http://xxx/page.html#page1 http://xxx/page.html#page2 |
用户体验 | 页面间切换加载慢,移动端,用户体验差 | 页面片段间切换快,移动端,用户体验想对可以 |
能否实现转场动画 | 无法实现 | 容易实现 |
页面间传递数据 | 依赖url / cookie / localStorage; 麻烦 | 同一个外壳页面内,简单 |
搜索引擎优化SEO | 可以直接做 | 需要借助一些框架等,麻烦 |
特别适用范围 | 需要对搜索引擎友好的网站 | 对体验要求高的应用,倾向于移动端 |
开发难度 | 低,框架选择容易 | 高,需要专门的框架来降低开发难度 |
单页引用相对于移动端还是可以的,可根据相应的需求选择