谈谈对SPA的理解

什么是MPA?什么是SPA?

MPA是一个多页面应用，是最初网站的开发模式。MPA指一个应用程序是由多个HTML页面组成的。单页面的应用是指一个应用程序是由单个页面组成的。它将所有的活动都局限在一个Web应用中，单页面应用程序仅在页面初始化的时候加载HTML、CSS、JS的资源，一旦页面加载完成，页面不会因为用户的操作而做页面的重新加载和跳转。

为什么会产生SPA?

在我们传统的Web应用程序的开发中，我们一个应用程序是由多个网页构成的，用户在登录页面登录成功就会跳转到主页面模块当中，在跳转的时候，需要加载HTML、CSS、Javascript等资源。如果用户退出登录功能，就会从主页面跳转到登录页面。这个过程中，又要重新加载登录页面的资源，造成了页面重新加载的问题。而且我们的页面的资源都是从后端那获取的，会造成服务器的压力过大。将页面等资源返回时，由于数据过多，会造成用户体验效果极差。
为了解决上述的问题，就引入了一个SPA页面。整个页面在初始渲染的时候将所有的资源加载进来。当用户选择其它功能块时，不会造成资源的加载，提高了用户的体验。当用户从主页面重新回到登录页面的时候，登录页面的资源不需要重新加载。

SPA的优点：

1、有良好的用户体验，用户访问页面不需要频繁地切换页面，频繁地重新加载数据。
2、前后端的分离：在传统的请求中，前后端是混合开发的，所有的静态资源都在Webapp下，前端需要请求获得页面的资源。但是，引入了SPA,前端只需要向后端拿数据。这样有助于前后端的分工合作。
3、减轻服务器的压力：服务器给我们的数据不再是逻辑和页面的合成，服务器只需要给我们数据，我们通过Ajax进行局部的渲染，吞吐能力提高几倍。

SPA的缺点：

1、第一次加载缓慢,由于第一次加载的时候需要引入所有的资源，会导致首屏加载过慢。如何解决这个问题？我们可以使用按需加载，只加载首屏，等网络设备空闲时，我们再加载其他的资源；第二个方法是懒加载，用户需要用到某个功能时才加载对应的组件。
2、对搜索引擎SEO不友好，因为渲染是在浏览器中进行的，搜索引擎抓取的内容，需要有完整的HTML结构
3、页面没有刷新，没有办法进行前进和后退。
4、页面的url不会进行改变，当我们不小心刷新时，我们可能会回到最初的页面。