一、什么是SPA
SPA(single-page application),翻译过来就是单页应用。它的特点是:仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成,SPA 不会因为用户的操作而进行页面的重新加载或跳转;取而代之的是利用路由机制实现 HTML 内容的变换,UI 与用户的交互,避免页面的重新加载。
举个例子来讲,就是一个杯子,早上装的牛奶,中午装的是开水,晚上装的是茶,我们发现,变的始终是杯子里的内容,而杯子始终是那个杯子
我们熟知的JS框架如react,vue,angular,ember都属于SPA
二、SPA和MPA的区别
与SPA单页面应用相对应的是MAP(多页面应用)。
在MPA中,每个页面都是一个主页面,都是独立的当我们在访问另一个页面的时候,都需要重新加载html、css、js文件,公共文件则根据需求按需加载。我们以前的servlet项目中的前端,就是一个个html页面构成一个网站前端,这种就是多页面应用MPA。如下图:
下面是MPA和SPA的区别
单页面应用(SPA) | 多页面应用(MPA) | |
---|---|---|
组成 | 一个主页面和多个页面片段 | 多个主页面 |
刷新方式 | 局部刷新 | 整页刷新 |
url模式 | 哈希模式 | 历史模式 |
SEO搜索引擎优化 | 难实现,可使用SSR方式改善 | 容易实现 |
数据传递 | 容易 | 通过url、cookie、localStorage等传递 |
页面切换 | 速度快,用户体验良好 | 切换加载资源,速度慢,用户体验差 |
维护成本 | 相对容易 | 相对复杂 |
三、SPA与MPA优缺点对比
SPA单页应用优缺点如下
优点:
1.用户体验好、快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染;
2.基于上面一点,SPA 相对对服务器压力小;
3.前后端职责分离,架构清晰,前端进行交互逻辑,后端负责数据处理;
缺点:
1.初次加载耗时多:为实现单页 Web 应用功能及显示效果,需要在加载页面的时候将 JavaScript、CSS 统一加载,部分页面按需加载;
2.前进后退路由管理:由于单页应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理;
3.SEO 难度较大:由于所有的内容都在一个页面中动态替换显示,所以在 SEO 上其有着天然的弱势。
MPA多页面应用的优缺点如下
优点:
1.首屏加载较快,只需要加载本页面的HTML、CSS、JS
2.有利于优化SEO。
3.页面复杂度不高,开发成本较低。
缺点:
1.网站的后期维护难度较大。
2.页面之间的跳转受网络以及设备等影响,耗时较长,出现空白等待的页面,用户体验不高
3.代码重复度大。
4.对服务器的压力较大
四、SPA的实现原理
原理
1.监听地址栏中hash变化驱动界面变化
2.用pushsate记录浏览器的历史,驱动界面发送变化
实现
hash 模式:
核心是通过监听url中的hash来进行路由跳转
下面是一个简单的代码逻辑示例:
//路由router
class Router {
constructor () {
this.routes = {}; // 存放路由path及callback
this.currentUrl = '';
// 监听路由change调用相对应的路由回调
window.addEventListener('load', this.refresh, false);
window.addEventListener('hashchange', this.refresh, false);
}
route(path, callback){
this.routes[path] = callback;
}
push(path) {
this.routes[path] && this.routes[path]()
}
}
// 使用 router
window.miniRouter = new Router();
miniRouter.route('/', () => console.log('page1'))
miniRouter.route('/page2', () => console.log('page2'))
miniRouter.push('/') // page1
miniRouter.push('/page2') // page2
history模式
history 模式核心借用 HTML5的history api,这个api 提供了丰富的 router 相关属性。如下几个api:
1.history.pushState 浏览器历史纪录添加记录
2.history.replaceState修改浏览器历史纪录中当前纪录
3.history.popState 当 history 发生变化时触发
下面是一个实现的代码示例:
// 定义 Router
class Router {
constructor () {
this.routes = {};
this.listerPopState()
}
init(path) {
history.replaceState({path: path}, null, path);
this.routes[path] && this.routes[path]();
}
route(path, callback){
this.routes[path] = callback;
}
push(path) {
history.pushState({path: path}, null, path);
this.routes[path] && this.routes[path]();
}
listerPopState () {
window.addEventListener('popstate' , e => {
const path = e.state && e.state.path;
this.routers[path] && this.routers[path]()
})
}
}
// 使用 Router
window.miniRouter = new Router();
miniRouter.route('/', ()=> console.log('page1'))
miniRouter.route('/page2', ()=> console.log('page2'))
// 跳转
miniRouter.push('/page2') // page2