持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
简介
单页面应用
SPA单页面应用（SinglePage Web Application），指只有一个主页面的应用，一开始只需要加载一次js、css等相关资源。所有内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，就是切换相关组件，仅仅刷新局部资源。（单页面应用指一个系统只加载一次资源，然后下面的操作交互、数据交互是通过router、ajax来进行，页面并没有刷新）
多页面应用
MPA多页面应用 （MultiPage Application），指有多个独立页面的应用，每个页面必须重复加载js、css等相关资源。多页应用跳转，需要整页资源刷新。
单页面应用与多页面应用的优缺点
单页面的优缺点分别是什么？
SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。
优点：
用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染； 基于上面一点，单页面应用SPA 相对服务器压力小； 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
缺点：
初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载； 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理； SEO (搜索引擎优化)难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。可通过webpack和prerender-spa-plugin第三方插件 这两个工具配合解决。
多页面应用的优缺点分别是什么？
多页面和单页面的最大区别是需要更多的页面和更多的栏目来承载不同页面的链接。
优点
- 第一点与单个页面相反，它具有更强的可伸缩性，可以添加更多的子页面，也可以添加层级，三级或者四级，加上搜索框。
- 早在20世纪90年代就有多页面，用户已经熟悉了多页面操作。
- SEO功能和更突出的优势，它比单页面承载的内容更多，包括搜索引擎和营销策略。 缺点
这就是工作量的问题，早期页面的设计、前端框架的构建和后端的开发，还有后期维护，工作量相当大。在选择单页面或多页面网站时，要考虑内容的容量和工作量，并做出合理的衡量。
