SPA和MPA区别_mpa和spa

单页面应用和多页面应用是常见的两种前端架构模式,区别如下:
1、页面加载方式
SPA在初始时只加载一个HTML,客户端渲染.所以首屏加载时间较长,
MPA每次切换页面时都需要重新加载整个HTML页面(包含了此页面需要的脚本和样式),一般为服务端渲染,所以需要为每个页面编写独立的HTML、CSS、JavaScript文件，开发成本相对较高。
2、页面切换方式
SPA是通过前端路由来实现页面的切换,通过浏览器的hash模式或者h5的history模式进行路由切换,根据URL来加载对应的页面
MPA一般是通过超链接等传统的页面跳转方式来切换页面
3、数据交互与通信
SPA一般是通过AJAX异步获取数据,局部更新页面,组件与组件之间交互数据较方便
在多页面应用中，不同页面之间需要通过表单提交、URL参数传递等方式来进行数据交互。页面之间数据交互比较麻烦
4、SEO优化
SPA不利于SEO优化
5、开放成本和用户体验
SPA页面利用了组件化开发和单向数据流的的设计模式,提高了代码的可维护性和复用性;SPA具有良好的用户体验,页面切换快速、无刷新
MPA开发比较传统,每个页面都是独立的,开发成本高;用户体验不好:每次切换页面都需要加载延迟;