SPA和MPA

SPA和MPA

2023 年 02 月 17 日

912 次浏览

1006字数

#### 一、SPA单页面应用

SPA（single-page application），翻译过来就是单页应用`SPA`是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码（`HTML`、`CSS和JavaScript`）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载，也不会将控制转移到其他页面举个例子来讲就是一个杯子，早上装的牛奶，中午装的是开水，晚上装的是茶，我们发现，变的始终是杯子里的内容，而杯子始终是那个杯子结构。

我们熟知的JS框架如 `react`, `vue`, `angular`, `ember`都属于SPA。

#### 二、MPA多页面应用

MPA（MultiPage Application） ，指有多个独立页面的应用（多个html页面），每个页面必须重复加载`JS`、`CSS`等相关资源。多页应用跳转，需要整页资源刷新。与 SPA 对比最大的不同即是页面路由切换由原生浏览器文档跳转（navigating across documents）控制。 页面跳转，是返回 `HTML` 的。

#### 三、SPA与MPA优缺点比较

<table><tbody><tr><td></td><td>SPA</td><td>MPA</td></tr><tr><td>组成</td><td>一个主页面和多个页面片段</td><td>多个完整页面</td></tr><tr><td>跳转方式</td><td>一个页面片段删除或隐藏，加载另<br>一个页面片段并显示，片段间的模<br>拟跳转，没有离开外壳页面</td><td>页面之间的跳转是从一个页面到另<br>一个页面</td></tr><tr><td>资源共用（CSS与JS）</td><td>共用，只需要在外壳部分加载</td><td>不共用，每个页面都需要加载</td></tr><tr><td>刷新方式</td><td>局部刷新</td><td>整页刷新</td></tr><tr><td>URL模式</td><td>leesong.top/#/pageone<br>leesong.top/#/pagetwo</td><td>leesong.top/pageone.html<br>leesong.top/pagetwo.html</td></tr><tr><td>用户体验</td><td>页面片段间切换速度快，转场动画<br>容易实现</td><td>页面切换加载缓慢，流畅度不够，<br>用户体验较差</td></tr><tr><td>页面间数据传递</td><td>容易，利用Vuex或者Vue中的父子组件通信</td><td>相对麻烦，依赖URL传参、cookie、localStorage</td></tr><tr><td>搜索引擎优化<br>SEO</td><td>实现比较困难，不利于SEO检索，可以利用服务端渲染（SSR）优化</td><td>容易实现</td></tr><tr><td>开发成本</td><td>较高、需要借助专业框架降低开发难度</td><td>较低、页面重复代码较多</td></tr><tr><td>维护成本</td><td>相对容易</td><td>相对困难</td></tr></tbody></table>

最后修改：2023 年 08 月 22 日