一：单页应用

1）单页应用是什么？

SPA(single page application): 单页面应用，即一个web项目就只有一个页面（即一个HTML文件）。

就是把整个项目的所有页面的所有内容分成了很多的小块（就是组件），可以重复利用的，可以任意调整的组件，每个组件就是一个独立的部分（包括html，css和javascript代码）。再做一个html（基本上啥也没有），这个html就是一个页面容器，需要放哪个组件时，直接引入就行。跳转时，直接跳转组件就行。当需要加载某个组件时，js会动态创建这些组件里的HTML，CSS。

2）单页应用的优缺点
  • 优点
  1. 减轻服务器压力。服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；

  1. 有良好的交互体验。能提升页面切换体验，用户在访问应用页面是不会频繁的去切换浏览页面，从而避免了页面的重新加载。

    单页面是一次性把web应用的所有代码（HTML，JavaScript和CSS）全部请求过来，有时候考虑到首屏加载太慢会按需加载。这样一来，以后用户的每一个动作都不会重新加载页面（即不用再问服务器要页面的HTML慢，css和js代码），取而代之的是利用 JavaScript 动态的变换HTML的内容（这不需要和服务器交互，除非数据是动态，那么只需要问服务器要数据即可）。

缺点

  1. 前进、后退管理。由于单页Web应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能。

    配置好路由信息，通过记录浏览过的历史路由信息，可以很好的记录或历史查看过的界面，也可以独立写个足迹功能实现。

  1. 首屏加载(初次加载)耗时多。为实现单页Web应用功能及显示效果，需要在加载页面的时候将JavaScript、CSS统一加载，部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理；
  1. SEO难度较高。SEO差的原因是因为页面中的内容都是靠js渲染出来了，在百度或者goole这样的搜素引擎当中，排名会比较差。

二：多页应用（MultiPage Application，MPA）

1) 什么是多页面应用？

项目是由多个完整的页面组成。多页面跳转刷新所有资源，每个公共资源(js、css等)需选择性重新加载。

2) 多页应用的优缺点
  • 优点
    • 有利于seo。
    • 首屏加载加载快。
  • 缺点

    三：单页应用和多页应用对比

    • 页面切换慢。资源共用(html、css,js)不共享，不共用，每个页面都需要加载。
    • 页面重复代码多。
  单页面应用（SinglePage Web Application，SPA） 多页面应用（MultiPage Application，MPA）
组成 一个外壳页面和多个页面片段组成 多个完整页面构成
资源共用(css,js) 共用，只需在外壳部分加载 不共用，每个页面都需要加载
刷新方式 页面局部刷新或更改 整页刷新
url 模式 a.com/#/pageone a.com/pageone.html
整页刷新    
用户体验 页面片段间的切换快，用户体验良好 页面切换加载缓慢，流畅度不够，用户体验比较差
转场动画 容易实现 无法实现
数据传递 数据传递 依赖 url传参、或者cookie 、localStorage等