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

多页面（MPA）应用

• 每一次页面跳转的时候，后台服务器都会返回一个新的html文档，这种类型的网站也就是多页网站，也叫多页应用。(一个应用多个页面，页面跳转的时候，整个页面都刷新，每次都请求一个新的页面。)
• 页面跳转： 返回HTML
• 优点：

1. 首屏时间快
   首屏时间叫做页面首个屏幕的内容展现的时间，当访问一个页面的时候，服务器返回一个HTML文件，然后页面就会被展示出来，这个只经历了一个HTTP请求的过程，所以页面展示的速度很快，请求回来，页面也就展示出来了。
2. (搜索引擎优化)SEO效果好
   搜索引擎是根据网页的内容进行网页排名的，搜索引擎可以识别HTML中的内容，而我们的页面的所有内容都放在HTML文件中，这样的话，内容可以被所搜引擎使用，排名效果好。

• 缺点：
  1.页面切换慢
  因为每一次页面跳转的时候，都发送一个HTTP请求，所以当网速较慢的时候，容易出现卡顿现象。

• 多页面应用展示图

  
  
  捕获.PNG

单页面应用（SPA）

• 第一次进入页面时会请求一个html文件，刷新清除一下，切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容却变化了。
• 原理：
  利用JS感知到URL的变化，可以通过JS动态的将当前的页面内容清除掉，接着将下一个页面的内容挂载到当前的页面，页面每次切换跳转时，并不需要做HTML请求。这样节省了很多HTTPf发送延迟，切换速度快。
• 页面跳转： js渲染
• 优点： 页面切换快
  当使用单页面进行页面跳转的时候，页面的每次跳转不是加载HTML文件，节约了很多HTTP发送时延，它是通过JS动态的把当前页面的内容删除掉，再去吧新页面上的DOM结构渲染出来，这样使得切换页面的时候，速度很快。
• 缺点：

1. 首屏时间稍慢
   单页面应用的首屏时间慢，首屏需要请求一次HTML，同时还要发sing一次JS请求，两次请求回来了，首屏才会展示出来，相对于多页面应用，首屏时间慢。
2. SEO差
   SEO效果差，因为搜索引擎只认识html里的内容，不认识js渲染生成的内容，搜索引擎不识别，也就不会给一个好排名，会导致单页应用做出来的网页在搜索引擎上的排名差。
3. 为什么还要用 Vue 呢？
   Vue官方提供了一些其他的技术来解决这些缺点，比如服务端渲染技术（SSR），通过这些技术可以完美解决这些缺点，这样一来单页面应用对于前端来说就是非常完美的页面开发解决方案了。
4. react-router-dom
   也是实现的单页面应用。

• 单页面应用示意图

  
  
  捕获.PNG