SPA-单页Web应用

1.什么是SPA？

SPA是英文的缩写，全称是Single Page Application，即单页Web应用。

SPA：

1.SPA是一种介绍特殊web应用的理念 （是什么）
2.SPA可以提供最贴近于Native应用的用户体验 （干什么）
3.SPA可以用在：（在哪用）

a.跨平台的浏览器内核（webkit）的页面
（如：微信页面、Native App页面（手机QQ里面的QQ空间））
b.用web技术开发类似Native应用的App
（如：Telkomsel Moovigo，馋口街，爱班级）
c.机顶盒里的页面（拥有webkit内核）
（如：华为Digice项目）

2.详细介绍SPA

详细说明SPA到底是个什么东西，看过几个前端研发写的博客，他们都有不同的理解：
子凡：

单页Web应用是一种特殊的Web应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript和CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。
取而代之的是利用JavaScript动态的变换HTML的内容，从而实现UI与用户的交互。由于避免了页面的重新加载，SPA可以提供较为流畅的用户体验。

民工精髓：

所谓单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华，把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体验。
其实单页应用我们并不陌生，很多人写过ExtJS的项目，用它实现的系统，很天然的就已经是单页的了，也有人用jQuery或者其他框架实现过类似的东西。用各种JS框架，甚至不用框架，都是可以实现单页应用的，它只是一种理念。有些框架适用于开发这种系统，如果使用它们，可以得到很多便利。

伯乐：

单页面应用是仅包含单个网页的应用，目的是为了提供类似于本地应用的流畅用户体验。

大熊君：

所谓的单页面结构就是指多个页面间切换时，不刷新当前整个页面，更新页面展示数据，并且相应地改变地址栏中的url，以使用户可以分享这个url。

再说说我的理解：

单页应用就是通过一个主入口获取应用大部分资源，使用路由机制实现页面跳转的应用。

3.SPA的实际例子

因为手机的浏览器内核是个残废，所以单页Web应用主要用在移动端。但不是说单页Web应用在PC端就不可用使用，PC的浏览器内核健壮性强得没话说，如果再加上SPA技术的话，页面交互那更是棒棒的！
使用SPA的网站有：
CODING：**https://coding.net/pp**
Teambition：**https://bbs.teambition.com**
阿里云控制台：**https://home.console.aliyun.com**
百度云：**http://yun.baidu.com**
QQ空间：**https://mobile.qzone.qq.com**
YoloSong：**http://music.uodoo.com**
Huntnews：**http://huntnews.in**

使用SPA的手机App、机顶盒TV App有：
爱班级、馋口街、Telkomsel Moovigo、Digice TV

4.SPA的优缺点

优点：

1. 良好的交互体验
   前端进行的是局部渲染，避免了不必要的跳转和重复渲染。
2. 前后端职责分离，架构清晰
   前端进行交互逻辑，后端负责数据处理。
   前后端可以单独开发、单独测试。
3. 减轻服务器压力
   服务器只用出数据就可以，不用管展示逻辑和页面合成。

缺点：

1. 初次加载耗时多
   为实现单页Web应用功能及显示效果，需要在加载页面的时候将JavaScript、CSS统一加载，部分页面可以在需要的时候加载。
2. 前进后退路由管理
   由于单页Web应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理。
3. 页面模板化和区分代码逻辑
   由于单页Web应用在一个页面，当单页Web应用规模增大，页面会越来越多，我们需要将页面模板化；业务会越来越多，我们需要根据业务区分代码逻辑。
4. SEO难度较大
   单页Web应用因为只有一个页面主入口，所以很难被搜索引擎收录。

其实上面说到的前三个问题都已经得到了解决，唯独最后一个还未找到解决方案。
因为单页Web应用最根本的缺陷就是不利于SEO，因为界面的绝大部分都是动态生成的，所以搜索引擎很不容易索引它。

5.解决SPA的缺点

a.初次加载耗时多
可以使用模块化框架，按需加载资源。
如：使用SeaJS、RequireJS

b.前进后退路由管理
可以使用原生H5 History API。
如：window.history.replaceState和window.history.pushState

可以使用支持路由管理的集合框架。

补充：

深入说明就是如果用“location.href”实现页面来回跳转会出现资源重复获取、文件重新解析、javascript重新执行、css重新渲染等问题。
使用路由机制则不会出现该问题。

c.页面模板化和区分代码逻辑
需要引入MV*框架，它们的基本思路都是在JS层创建模块分层和通信机制。
这类框架包括Ember.js，Backbone.js，Angular.js，Avalon.js、Vue.js等。

6.完整SPA项目

张鑫旭写的**mobilebone**
自述：mobile移动端，PC桌面端页面无刷新过场JS骨架，简单、专注！

赵达写的**spa**
自述：SPA是为构建WebApp设计的路由控制和视图转换框架。

dolymood的**mobile-router**
自述：轻量级web端单页面骨架。

onlyurei的**knockout-spa**
自述：用Knockout做个的SPA。

7.SPA总结

最后总结下单页Web应用，SPA的出现最主要的目的是提升交互体验。
难道使用了SPA就一定能提升交互体验吗？
带着这个问题，我对SPA的讲解就结束啦，谢谢！

附上参考资源：
资源一：**单页面应用SPA架构**
资源二：**构建单页Web应用**