一、简介
单页面应用：SinglePage Web Application，简称 SPA
多页面应用：MultiPage Application，简称 MPA
二、定义区分
（1）单页面应用
只有一个 WEB 主页面的应用，公共资源(js、css等)仅需加载一次，所有的内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，就是切换相关组件，仅刷新局部资源。常用于PC端官网、购物等网站。
（2）多页面应用
有多个独立的页面的应用，每个公共资源(js、css等)需选择性重新加载，多页面跳转刷新所有资源。常用于 app 或 客户端等。
三、图说区别
（1）单页应用模型示意图：
image.png
（2）多页应用模型示意图：
image.png
四、表格对比
| 单页应用(SPA) | 多页应用(MPA) | |
|---|---|---|
| 结构 | 一个主页面 + 许多模块的组件 | 许多完整的页面 |
| 资源文件(css，js) | 组件公用的资源只需要加载一次 | 每个页面都要自己加载公用的资源 |
| 刷新方式 | 页面局部刷新 | 整页刷新 |
| url模式 | a.com/#/page1 | a.com/page1.html |
| 用户体验 | 页面切换快，体验佳；当初次加载文件过多时，需要做相关的调优。 | 页面切换慢，网速慢的时候，体验尤其不好 |
| 适用场景(SEO) | 对体验度和流畅度有较高要求的应用，不利于 SEO（可借助 SSR 优化 SEO），适用于经常切换页面的场景和数据传递较多，多表单的场景 | 适用于对 SEO 要求较高的应用 |
| 过渡动画 | vue 提供了 transition 的封装组件，容易实现 | 很难实现 |
| 内容更新 | 相关组件的切换，即局部更新 | 整体 HTML 的切换，费钱（重复 HTTP 请求） |
| 路由模式 | 可以使用 hash ，也可以使用 history | 普通链接跳转 |
| 数据传递 | 因为单页面，使用全局变量就好（Vuex） | cookie 、localStorage 等缓存方案，URL 参数，调用接口保存等 |
| 相关成本 | 前期开发成本较高，后期维护较为容易 | 前期开发成本低，后期维护就比较麻烦，因为可能一个功能需要改很多地方 |
| html文件请求 | 第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容也变化了 | 每一次页面跳转的时候，后台服务器都会给返回一个新的html文档 |
| 首屏时间 | 首屏时间慢，首屏时需要请求一次html，同时还要发送一次js请求，两次请求回来了，首屏才会展示出来 | 首屏时间快，访问页面的时候，服务器返回一个 html，页面就会展示出来，这个过程只经历了一个HTTP请求 |
网友评论