SPA单页面的优缺点以及与多页面的区别

单页面应用（Single Page Application, SPA），它通过动态重写当前页面来与用户交互，避免了页面之间的切换而影响用户体验。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JS、CSS资源。一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转，而是利用JS动态变化HTML从而实现交互。

目前大众所熟知的JS框架如Vue、React、Angular都属于SPA单页面应用。

优缺点：

优点

• 具有桌面应用的及时性、网站的可移植性和可访问性；

• 用户体验好，内容的改变不需要重新加载整个页面；

• 良好的前后端分离，分工更加明确。

• 减轻服务器压力，只需要提供数据即可，不用负责逻辑与页面的合成

缺点

• 不利于搜索引擎的抓取，所有内容都在一个页面中动态替换显示

• 首次渲染速度相对较慢，为实现单页Web应用功能及显示，需要在加载页面的时候将JS、CSS统一加载，部分页面可在需要时加载。 所以必须对JS及CSS代码进行合并压缩处理

SPA和MPA的区别

MPA是多页应用，每一个页面就是一个主页，相互独立

	SPA	MPA
组成	一个主页面和多个页面片段	多个主页面
刷新方式	局部刷新	整页刷新
url模式	哈希模式	历史模式
SEO搜索引擎优化	难实现，可使用SSR方式改善	容易实现
数据传递	容易	通过url,cookie,localStorage等传递
页面切换	速度快、用户体验良好	切换加载资源，速度慢，用户体验差
维护成本	相对容易	相对复杂