多页和单页应用模式区别

多页应用模式(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 可以直接做 需要借助一些框架等,麻烦
特别适用范围 需要对搜索引擎友好的网站 对体验要求高的应用,倾向于移动端
开发难度 低,框架选择容易 高,需要专门的框架来降低开发难度

单页引用相对于移动端还是可以的,可根据相应的需求选择

  

原文地址:https://www.cnblogs.com/changxue/p/9003601.html