SPA和MPA的区别

SPA

SPA全称single page application，它只实际上只加载了一个页面，在页面中采用路由机制实现HTML内容的转换，达到页面切换的效果，减少了页面的重新加载。

优点

• 用户体验相比传统的MPA要好很多，速度快，内容变化也不用重新加载整个页面。
• 对服务器的压力也比较少
• 前后端分离，前端只负责交互逻辑，后端负责数据处理

缺点

• 首次加载耗时长，通常会在index.html先追加一个loading效果，防止白屏
• SEO难度比较大，无法被搜索引擎获取到数据

MPA

MPA全称Multi page application，在每一次页面跳转的时候都会重新加载一个完整的html页面

优点

• 首屏加载速度快
• SEO优化较好，可以被搜索引擎识别出来

缺点

• 切换页面时体验没有SPA好

不同之处

• 构成不一样，MPA是多个页面的，SPA是一个页面，多个DOM构成的
• 跳转方式不同，MPA是一个页面跳转到另外一个页面，SPA是假跳转，通过操作DOM的方式实现
• URL模式不同，SPA是完整的URL模式，SPA是通过/path/方式模拟
• 用户体验不同，SPA在移动设备上体验更好
• SEO优化，MPA可以直接处理，而MPA需要额外方案处理
• 转场动画实现，MPA无法实现，SPA可以实现