持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第九天, 点击查看活动详情
什么是SPA？
SPA(single-page application),翻译过来就是单页面应用。SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页面应用中，所有必要的代码(HTML、JavaScript和CSS)都通过单个页面的加载而检索，或者根据需要(通常是为响应用户操作)动态装载适当的资源并添加到页面，页面在任何时间都不会重载，也不会将控制转移到其他页面，举个例子来讲，就是一杯水，早上装的牛奶，中午装的是开水，晚上装的是茶，变的始终只是杯子里的内容，而杯子始终是那个杯子。
我们熟知的JS框架如react、vue、angular、ember都属于SPA
SPA和MPA的区别
上面大家已经对单页面有所了解了，下面来讲讲多页面应用MPA(MultiPage-page application),翻译过来就是多页面应用，在MPA中每一个页面都是一个主页面，都是独立的，当我们访问另一个页面的时候，都需要重新加载html、css、js文件，公共文件则根据需求按需加载如下图
单页面应用与多页面应用的区别
| 单页面应用(SPA) | 多页面应用(MPA) | |
|---|---|---|
| 组成 | 一个主页面和多个页面片段 | 多个页面 |
| 刷新方式 | 局部刷新 | 整页刷新 |
| url模式 | 哈希模式 | 历史模式 |
| SEO搜索引擎优化 | 难实现，可使用SSR方式改善 | 容易实现 |
| 数据传递 | 容易 | 通过url、cookie、localStorage等传递 |
| 页面切换 | 速度快，用户体验良好 | 切换加载资源，速度慢，用户体验差 |
| 维护成本 | 相对容易 | 相对复杂 |
单页面应用的优缺点
优点
- 具有桌面应用的及时性、网站的可移植性和可访问性
- 用户体验良好、快、内容的改变不需要重新加载整个页面
- 良好的前后端分离，分工更明确 缺点
- 不利于搜索引擎的抓取
- 首次渲染速度相对较慢
实现一个SPA
原理
- 监听地址栏中的
hash变化驱动界面变化 - 用
pushsate记录浏览器的历史，驱动界面发送变化
实现
hash模式
核心通过监听url中的hash来进行路由跳转
