001-前端面试-vue之谈一谈什么是MPA与SPA

前言：当面试官问这个问题的时候，我们要从三个维度去回答
1、什么是MPA与SPA
2、MPA与SPA的优缺点
3、什么场景下我们会用到这两者呢
（注：对于内容可能的延伸面试题都利用超链接的形式展示，点击蓝色字体即可查看！！）
面试不发愁，关注前端课代表，啊哈~

MPA与SPA都是一些前端工程化开发的概念名词缩写，代表着两个完全相反的开发模式和用户体验。MPA指的是多页面应用、SPA指的是单页面应用。

MPA多页面应用（指一个网站存在多个页面，对应着多个实际存在的HTML文件，访问每一个页面都需要经历一次完整的页面请求过程 ）
优点：
1、首屏加载速度快（由于首屏加载的时候对应的是一个HTML文件，在不考虑图片加载，额外的CSS的情况下，这种模式的内容呈现速度是最快的）
2、对SEO友好，有利于搜索引擎的爬取（关于SEO，在我们已知的网页TKD三要素之外，网页的内容也是收录的关键因素，对于多页面应用，网页的内容都是位于HTML文件的body中）
3、容易与服务端语言结合（由于传统的页面都是由服务端直出，所以可以利用PHP、Python等非前端语言来编写页面模板，最终输出HTML页面到浏览器访问）
缺点：
1、页面之间的跳转访问速度慢，用户体验不好（由于多页面应用在每一次的跳转都需要经过一次完整的页面请求过程，所以导致页面跳转访问速度慢；并且如果网页的资源很多或者网速不好的时候，这个过程就会有明显的卡顿或者布局错乱，影响用户体验）
2、开发成本高（传统的多页面应用缺少前端工程化的很多优秀技术栈的支持，导致前端工程师的开发过程中效率低下；如果是基于PHP等非前端语言开发，工作量通常是压在一个开发者身上，无法做到前后端分离来利用好跨岗位协作）

SPA单页面应用（指的是无论网站有多少个页面，在SPA项目中实际只有一个HTML文件，也就是index.html首页文件；它只有第一次访问的时候才需要经历一次完成的页面请求过程，之后的每个页面跳转或者数据更新操作，都是通过AJAX技术来获取需要呈现的内容并只更新指定的网页位置）
优点：
1、用户体验好（由于只需要第一次完整请求，所以在页面切换过程中速度快）
2、开发效率高（前后端分离，后端负责API接口，前端负责界面和联调，同步进行缩短工期）
缺点：
1、首屏加载慢（SPA打开首页后，因为一整个网站是一个单页面，集中于一个HTML文件中，所以相对于MPA来说，首屏加载慢）
2、不利于SEO优化（浏览器查看源代码，会发现无法设置每个路由的TDK，永远都是index.html文件，只有最基础的HTML结构，不利于搜索引擎爬取）