简单理解单页Web应用

要理解单页Web应用，需要和非单页Web应用，也就是多页Web应用做对比。

多页 Web 应用随处可见，随便一个新闻网站上面都贴满新闻的链接，打开之后就会出现一个新的新闻页面。这种包含多个页面，通过链接切换的网站，就是多页Web应用。用户平时上网看到的网站，绝大多数都是此类。而单页Web应用，顾名思义，单击链接后，会直接在这个页面里刷新并展示。也就是说，在多页的网站中，每打开一个新的链接，浏览器都会重新向服务器请求一个完整的 HTML 网页，然后重新运行进度条，重新刷新。

单页的 Web 应用会在用户单击链接之后直接和服务器联系（不会告诉浏览器页面切换了），拉取数据。虽然看起来与多页Web应用没什么区别，但技术上的区别很大。多页Web应用，或者说传统的网页应用，更应被称为“网站”，它的服务器上有很多页面，每个页面有属于自己的 URL。服务器上也有可能没有页面，服务器根据请求动态生成 HTML 输出给浏览器。无论如何，服务器是主角，脏活累活都是服务器干的，浏览器只负责把服务器“吐”给它的东西再“吐”给用户。

单页Web应用，更像是一个原生的Android或者iOS应用，只不过现在浏览器成了一个操作系统。以微信为例，用户从微信的会话列表页进入某个具体的聊天场景，虽然发生了页面切换，但都是在微信这个大的页面里完成的，并没有反复刷新。服务器只负责输出数据，界面的显示、业务逻辑等都交给终端来做，一下子轻松了好多。

单页 Web 应用如何能在一个页面里把多个页面才能做的事情做完呢？这就需要以下两个必备技术：

（1）AJAX。作者之前介绍过，有了它，前端的 JavaScript 代码就可以拉取服务器上的数据了。

（2）页面历史栈。前面介绍过，单页 Web 应用只有一个页面，也就是只有一个URL，那么用户想前进或者后退该怎么办呢？这就依赖单页Web页面自己的处理了。

好在这些都不是什么难事，而且浏览器的性能在不断提升，本来在服务端做的事情，拿到浏览器端来做也不会出现卡顿的情况，各种开发框架也发展得很好，例如AngularJS、React。

总结一下，单页Web应用越来越多，有以下两个原因：（1）多页面的网站结构，打开一个链接后，还要等很长时间整页才刷新，用户体验不好。应该只刷新变化了的部分，俗称局部刷新，像单页 Web 应用那样单独请求想要的数据自己刷新才是最合理的。

（2）如果项目有Android、iOS、Web三种页面，那么最好由服务器提供数据API，然后三者共用。显然，单页Web应用比多页Web应用有优势。如果采用多页面Web应用，服务器还要根据业务逻辑生成 HTML，这对后台程序员来说是一件极其痛苦的事情。