前端SPA(单页面应用)

1、什么是SPA  (单页面应用)

　　SPA是一种特殊的Web应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML。JavaScript、Css。一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转，而是利用JavaScript动态的变换HTML (采用的是div切换显示和隐藏)，从而实现UI与用户的交互。在SPA应用中，应用加载之后就不会再有整页刷新。相反，展示逻辑预先加载，并有赖于内容Region (区域) 中的视图切换来展示内容。

2、单页Web应用 (single,page,web,application,SPA) 是当今网站开发技术的弄潮儿，很多传统网站都在或者已经转型为单页面Web应用，新的页面Web应用网站 (包括移动平台上的)也如雨后春笋般涌现在人们的面前，如Gmail、Evernote、Trello等。如果你是一名Web开发人员，却还没开发过或者甚至是没有听说过单页面应用，那你已经Out很久了。

 

　　单页Web应用和前端工程师们息息相关，因为主要的变革发生在浏览器端，用到的技术其实还是HTML+CSS+JavaScript，所有的浏览器都原生支持，当然有的浏览器因为具备一些高级特性，从而使得单页面Web应用的用户体验更上一层楼。

　　单页Web应用，顾名思义，就是只有一张Web页面的应用。浏览器一开始会加载必需的HTML、CSS和JavaScript，之后所有的操作都在这页面上完成，这一切都有JavaScript来控制。因此，单页Web应用会包含大量的JavaScript代码，复杂度可想而知，模块化开发和设计的重要性不言而喻。

3、SPA优缺点

 1）有良好的交互体验

能提升页面切换体验，用户在访问应用页面是不会频繁的去切换浏览页面，从而避免了页面的重新加载；

 2）前后端分离开发

单页Web应用可以和RESTful规约一起使用，通过REST API提供接口数据，并使用Ajax异步获取，这样有助于分离客户端和服务器端工作。更进一步，可以在客户端也可以分解为静态页面和页面交互两个部分；

 3）减轻服务器压力

服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；

 4）共用一套后端程序代码

不用修改后端程序代码就可以同时用于Web界面、手机、平板等多种客户端；

 

2、缺点：

　　1）SEO难度较高

　　　　由于所有的内容都在一个页面中动态替换显示，所以在SEO上其有着天然的弱势，所以如果你的站点对SEO很看重，且要用单页应用，那么就做些静态页面给搜索引擎用吧；

　　2）前进、后退管理

　　　　由于单页Web应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理，当然此问题也有解决方案，比如利用URI中的散扩+iframe实现；

　　3）初次加载耗时多

　　　　为实现单页Web应用功能及显示效果，需要在加载页面的时候将JavaScript、CSS统一加载，部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理；