五、SPA 单页面、MPA多页面的理解？它们的优缺点分别是什么？

一、什么是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