SPA和MPA的区别

单页面与多页面的区别

（1）单页应用（SinglePage Application ， SPA）

指只有一个主页面的应用，一开始只需要加载一次js，css等相关资源。所有的内容都包含在主页面，对每一个功能模块组件化。单页面应用跳转，就是切换相关组件，只刷新局部资源。（仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载）

（2）多页应用（MultiPage Application ， MPA）

指有多个独立的页面的应用，每个页面必须重复加载，js，css等相关资源。多页应用跳转需要整页资源刷新。

（3）两者对比表格

对比项\模式	SPA	MPA
结构	一个主页面 + 许多模块的组件	许多完整的页面
体验	页面切换快，体验好，当初次加载文件过多时，需要做相关的调优	页面切换慢，网速慢的时候，体验尤其不好
资源文件	组件公用的资源只需要加载一次	组件公用的资源只需要加载一次
适用场景	对体验度和流畅度有较高要求的应用，不利于 SEO（可借助 SSR 优化 SEO）	适用于对 SEO 要求较高的应用
过渡动画	Vue 提供了 transition 的封装组件，容易实现	很难实现
内容更新	相关组件的切换，即局部更新	整体 HTML 的切换，费钱（重复 HTTP 请求）
路由模式	可以使用 hash ，也可以使用 history	普通链接跳转
数据传递	因为单页面，使用全局变量就好（Vuex）	cookie 、localStorage 等缓存方案，URL 参数，调用接口保存等
相关成本	前期开发成本较高，后期维护较为容易	前期开发成本低，后期维护就比较麻烦，因为可能一个功能需要改很多地方

单页应用项目过大首页加载慢如何解决

• 使用CDN资源,减小服务器带宽压力
• 路由懒加载
• 将一些静态js css放到其他地方（如OSS），减小服务器压力
• 按需加载三方资源，如iview,建议按需引入iview中的组件
• 使用nginx开启gzip减小网络传输的流量大小
• webpack开启gzip压缩
• 若首屏为登录页，可以做成多入口，登录页单独分离为一个入口
• SSR渲染

SSR渲染

什么是服务端渲染，简单理解是将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。 于传统的SPA（单页应用）相比，服务端渲染能更好的有利于SEO，减少页面首屏加载时间，当然对开发来讲我们就不得不多学一些知识来支持服务端渲染。同时服务端渲染对服务器的压力也是相对较大的，和服务器简单输出静态文件相比，通过node去渲染出页面再传递给客户端显然开销是比较大的，需要注意准备好相应的服务器负载

什么是SSH：
	SSH是一种网络安全协议，用于计算机之间的加密登录。
	如果一个用户使用一台计算机使用ssh协议登录到另一台远程计算机，
	我们就可以认为，这种登录是安全的。即使被中途截获，密码也不会被泄露。

1）在主机A上向主机B发送连接请求；
2）主机B在与用户建立连接后，把自己的公钥发送给主机A；
3）主机A通过密钥协商技术产生一个随机密钥，然后使用主机B的公钥对这个随机密钥进行加密后发送给主机B;
4） 主机B接收到主机A发送过来的密文形式的密钥后，通过自己的私钥进行解密，
得到对称加密使用的密钥明文；至此，会话密钥已经生成完毕了；
5）主机A通过生成的会话密钥对账号和密码等信息进行加密然后发送给主机B；
6）主机B接收到加密信息后，使用会话密钥进行解密，从而得到明文的账号和密码进行账号验证；
7）主机B在验证账号和密码后通知主机A是否登录成功；
1
2
3
4
5
6
7
8
9
10
11
12
13