SPA（单页面应用）和MPA（多页面应用）

谁借莪１个温暖的怀抱￠ 2022-03-29 14:25 223阅读 0赞

![Image 1][]

### 单页面应用 ###

> 第一次进入页面时会请求一个`html`文件，刷新清除一下，切换到其他组件，此时路径也相应变化，但是并没有新的`html`文件请求，页面内容却变化了。

**原理：** `js`会感知到`url`的变化，通过这一点可以用`js`动态地将当前页面的内容清除，然后将下一个页面的内容挂载到当前页面上。这个时候的路由不再是后端来做了，而是前端来做，判断页面显示相应的组件，清除不需要的。

**页面跳转：** js渲染  
**优点：** 页面切换快  
**缺点：** 首屏时间稍慢，SEO差

1. 为什么页面切换快？

页面每次切换跳转时，并不需要处理`html`文件的请求，这样就节约了很多`HTTP`发送时延，所以我们在切换页面的时候速度很快。

2. 为什么首屏时间慢，SEO 差？

单页应用的首屏时间慢，首屏时需要请求一次`html`，同时还要发送一次`js`请求，两次请求回来了，首屏才会展示出来。相对于多页面应用，首屏时间慢。

SEO效果差，因为搜索引擎只认识`html`里的内容，不认识`js`渲染生成的内容，搜索引擎不识别，也就不会给一个好排名，会导致单页应用做出来的网页在搜索引擎上的排名差。

3. 为什么还要用 Vue 呢？

`Vue`官方提供了一些其他的技术来解决这些缺点，比如服务端渲染技术（SSR server side render），通过这些技术可以完美解决这些缺点，这样一来单页面应用对于前端来说就是非常完美的页面开发解决方案了。

--------------------

### 多页面应用 ###

> 每一次页面跳转的时候，后台服务器都会返回一个新的`html`文档，这种类型的网站也就是多页网站，也叫多页应用。

**页面跳转：** 返回HTML  
**优点：** 首屏时间快，SEO效果好  
**缺点：** 页面切换慢

1. 为什么多页应用的首屏时间快？

首屏时间叫做页面首个屏幕的内容展现的时间，当我们访问页面的时候，服务器返回一个`html`，页面就会展示出来，这个过程只经历了一个`HTTP`请求，所以页面展示的速度非常快。

2. 为什么搜索引擎优化效果好（SEO）？

搜索引擎在做网页排名的时候，要根据网页的内容才能给网页权重，来进行网页的排名。搜索引擎是可以识别`html`内容的，而我们每个页面所有的内容都放在`html`中，所以这种多页应用SEO排名效果好。

3. 缺点：切换慢

每次跳转都需要发送一个`HTTP`请求，如果网络状态不好，在页面间来回跳转时，就会发生明显的卡顿，影响用户体验。

### 总结 ###

<table> 
 <tbody> 
 <tr> 
 <td style="width:78px;">/</td> 
 <td style="width:344px;">多页面应用模式MPA</td> 
 <td style="width:425px;"> 单页面应用模式SPA </td> 
 </tr> 
 <tr> 
 <td style="width:78px;"> 应用构成 </td> 
 <td style="width:344px;">由多个完整页面构成</td> 
 <td style="width:425px;"> 一个外壳页面和多个页面片段构成 </td> 
 </tr> 
 <tr> 
 <td style="width:78px;"> 跳转方式 </td> 
 <td style="width:344px;"> 页面之间的跳转是从一个页面到另一个页面 </td> 
 <td style="width:425px;">一个页面片段删除或隐藏，加载另一个页面片段并显示。片段间的模拟跳转，没有开壳页面</td> 
 </tr> 
 <tr> 
 <td style="width:78px;">跳转后公共资源是否重新加载 &nbsp;</td> 
 <td style="width:344px;"> 是 </td> 
 <td style="width:425px;">否</td> 
 </tr> 
 <tr> 
 <td style="width:78px;"> URL模式 </td> 
 <td style="width:344px;"> http://xxx/page1.html和http://xxx/page2.html &nbsp; </td> 
 <td style="width:425px;"> http://xxx/shell.html#page1和http://xxx/shell.html#page2 </td> 
 </tr> 
 <tr> 
 <td style="width:78px;">用户体验 &nbsp;</td> 
 <td style="width:344px;"> 页面间切换加载慢，不流畅，用户体验差，尤其在移动端 </td> 
 <td style="width:425px;"> 页面片段间切换快，用户体验好，包括移动设备 &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="width:78px;">能否实现转场动画 &nbsp;</td> 
 <td style="width:344px;">否 &nbsp;</td> 
 <td style="width:425px;"> 容易实现（手机APP动效） </td> 
 </tr> 
 <tr> 
 <td style="width:78px;"> 页面间传递数据 &nbsp; </td> 
 <td style="width:344px;">依赖URL、cookie或者localstorage，实现麻烦 &nbsp;</td> 
 <td style="width:425px;"> 页面传递数据容易（Vuex或Vue中的父子组件通讯props对象） </td> 
 </tr> 
 <tr> 
 <td style="width:78px;"> 搜索引擎优化（SEO） </td> 
 <td style="width:344px;">可以直接做 &nbsp;</td> 
 <td style="width:425px;"> 需要单独方案（SSR） </td> 
 </tr> 
 <tr> 
 <td style="width:78px;"> 特别适用的范围 </td> 
 <td style="width:344px;">需要对搜索引擎友好的网站</td> 
 <td style="width:425px;"> 对体验要求高，特别是移动应用 </td> 
 </tr> 
 <tr> 
 <td style="width:78px;">开发难度</td> 
 <td style="width:344px;">较低，框架选择容易</td> 
 <td style="width:425px;"> 较高，需要专门的框架来降低这种模式的开发难度 </td> 
 </tr> 
 </tbody> 
</table>

转自：https://www.jianshu.com/p/a02eb15d2d70

[Image 1]: /images/20220329/2f28a970004a485baac859297f6c86b5.png