SPA的前世今生

前言

SPA(Single Page Application)，即单页应用，想必现在的前端对其早已耳熟能详，今天就来说道说道，SPA 的前世今生。

多页面应用（MultiPage Application，MPA）

为什么先说多页面，因为传统网站都是多页面的，从大学第一次做网页，到工作使用 JQ 库，一个个 html 页面拼凑而成的网站都是多页面的。

每一次页面跳转的时候，后台服务器都会给返回一个新的 html 文档，这种类型的网站也就是多页网站，也叫做多页应用。

多页面跳转刷新所有资源，每个公共资源(js、css 等)需选择性重新加载。

页面结构如图：

为什么多页应用的首屏时间快？

首屏时间叫做页面首个屏幕的内容展现的时间，当我们访问页面的时候，服务器返回一个 html，页面就会展示出来，这个过程只经历了一个 HTTP 请求，所以页面展示的速度非常快。

为什么搜索引擎优化效果好（SEO）？

搜索引擎在做网页排名的时候，要根据网页内容才能给网页权重，来进行网页的排名。搜索引擎是可以识别 html 内容的，而我们每个页面所有的内容都放在 Html 中，所以这种多页应用，seo 排名效果好。

但是它也有缺点，就是切换慢

因为每次跳转都需要发出一个 http 请求，如果网络比较慢，在页面之间来回跳转时，就会发现明显的卡顿。
新的需求促进新的技术诞生，随着业务量变大功能的复杂，前端对页面性能的要求越来越高，随之而来的就是单页面的应用。

单页应用（SinglePage Web Application，SPA）

第一次进入页面的时候会请求一个 html 文件，刷新清除一下。页面切换，也不是传统的请求另一个页面的 html,而是通过路由，改变组件，此时路径也相应变化，但是并没有新的 html 文件请求，页面内容也变化了。
原理是：JS 会感知到 url 的变化，通过这一点，可以用 js 动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来做，判断页面到底是显示哪个组件，清除不需要的，显示需要的组件。这种过程就是单页应用，每次跳转的时候不需要再请求 html 文件了。

页面结构如图：

为什么页面切换快？

页面每次切换跳转时，并不需要做 html 文件的请求，这样就节约了很多 http 发送时延，我们在切换页面的时候速度很快。

缺点：首屏时间慢，SEO 差

单页应用的首屏时间慢，首屏时需要请求一次 html，同时还要发送一次 js 请求，两次请求回来了，首屏才会展示出来。相对于多页应用，首屏时间慢。
SEO 效果差，因为搜索引擎只认识 html 里的内容，不认识 js 的内容，而单页应用的内容都是靠 js 渲染生成出来的，搜索引擎不识别这部分内容，也就不会给一个好的排名，会导致单页应用做出来的网页在百度和谷歌上的排名差。

优缺点，必有解决的对策

比如说服务器端渲染技术(如 SSR)可以解决 SEO 问题，通过这些技术可以完美解决这些缺点，解决完这些问题，实际上单页面应用对于前端来说是非常完美的页面开发解决方案。

具体对比分析：

	多页应用模式MPA	单页应用模式SPA
组成	多个完整页面构成	一个外壳页面和多个页面片段组成
资源共用(css,js)	不共用，每个页面都需要加载	共用，只需在外壳部分加载
刷新方式	整页刷新	页面局部刷新或更改
URL模式	http://xxx/page1.html 和 http://xxx/page2.html	http://xxx/shell.html#page1 和 http://xxx/shell.html#page2
用户体验	页面间切换加载慢，不流畅，用户体验差，特别是在移动设备上	页面片段间的切换快，用户体验好，包括在移动设备上
能否实现转场动画	无法实现	容易实现（手机app动效）
页面间传递数据	依赖URL、cookie或者localstorage，实现麻烦	因为在一个页面内，页面间传递数据很容易实现(父子之间传值，或vuex或storage之类)
搜索引擎优化（SEO）	可以直接做	不利于SEO检索，可利用SSR来实现
特别适用的范围	需要对搜索引擎友好的网站	对体验要求高的应用，特别是移动应用 购物网站