单页应用和多页应用的区别

之前一直对Bootstrap框架和Vue、react框架有什么不同点不明白，因为都是前端框架。直到看到了单页应用和多页应用才大致明白。bootstrap擅长做MPA，而react、vue等擅长做SPA。为什么手机app这样的SPA会更加流行，可能跟SPA虽然第一次加载慢一点，加载完之后就是通过ajax请求数据相应快有关。

名称解释

单页面应用：SinglePage Web Application，简称 SPA。单页应用又称 SPA（Single Page Application）指的是使用单个 HTML 完成多个页面切换和功能的应用。这些应用只有一个 html 文件作为入口，一开始只需加载一次 js,css 等相关资源。使用 js 完成页面的布局和渲染。页面展示和功能室根据路由完成的。单页应用跳转，就是切换相关组件，仅刷新局部资源。

多页面应用：MultiPage Application，简称 MPA。多页应用又称 MPA（Multi Page Application）指有多个独立的页面的应用，每个页面必须重复加载 js,css 等相关资源。多页应用跳转，需要整页资源刷新。

两者不同维度对比

html文件请求

• SPA：第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容也变化了
• MPA：每一次页面跳转的时候，后台服务器都会给返回一个新的html文档

首屏时间

• SPA：首屏时间慢，首屏时需要请求一次html，同时还要发送一次js请求，两次请求回来了，首屏才会展示出来
• MPA：首屏时间快，访问页面的时候，服务器返回一个 html，页面就会展示出来，这个过程只经历了一个HTTP请求