单页面（SPA）和多页面（MPA）

单页面（SPA）

• 单页面（SPA），一个项目中只有一个完整的html页面，其他的都是部分的html片段组成。页面跳转只是局部刷新，不会重新加载全部资源。片段之间的切换快，比较容易实现转场动画。

• 优点

  1. 用户体验好，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染
  2. 对服务器压力较小
  3. 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理

• 缺点

  1. 首屏加载慢，为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；
  2. 前进后退路由管理，由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
  3. 不利于 SEO

多页面（MPA）

• 多页面（MPA），一个项目是由多个完整的html页面组成，页面跳转所有的资源都要重新加载，页面之间的切换会出现卡顿空白的问题，不容易实现切换动画等

• 优点

  1. 首屏加载快，为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；
  2. 利于 SEO

• 缺点

  1. 用户体验较差，页面跳转需要重新加载整个页面
  2. 对服务器压力较大