单页应用和多页应用

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

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

优点

减轻服务器压力。服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；

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

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

缺点

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

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

首屏加载(初次加载)耗时多。为实现单页Web应用功能及显示效果，需要在加载页面的时候将JavaScript、CSS统一加载，部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理；

SEO难度较高。SEO差的原因是因为页面中的内容都是靠js渲染出来了，在百度或者goole这样的搜素引擎当中，排名会比较差。

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

有利于seo。

首屏加载加载快。

页面切换慢。资源共用(html、css,js)不共享，不共用，每个页面都需要加载。

页面重复代码多。

单页面应用（SinglePage Web Application，SPA）

多页面应用（MultiPage Application，MPA）

组成

一个外壳页面和多个页面片段组成

多个完整页面构成

资源共用(css,js)

共用，只需在外壳部分加载

不共用，每个页面都需要加载

刷新方式

页面局部刷新或更改

整页刷新

url 模式

a.com/#/pageone

a.com/pageone.html

用户体验

页面片段间的切换快，用户体验良好

页面切换加载缓慢，流畅度不够，用户体验比较差

转场动画

容易实现

无法实现

数据传递

依赖 url传参、或者cookie 、localStorage等