什么是单页面应用？

单页面应用（Single Page Application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

对于我来说，这个概念对于我来说还算是比较新的，之前还没接触过，是在学习vue的时候接触的。我看了一下，这个东西的应用还是很广泛的。

比如，拿微博做个例子：

我们到首页是这样的：

通过点击“明星”，有一个加载的提示：

然后在局部显示出新的内容：

而变动的只是这个div的内容，没有url上的跳转：

这就是一个单页面的模式，用户体验效果非常好。

单页面应用的优点

  • 最大的好处是用户体验，对于内容的改动不需要加载整个页面。
  • 数据层和UI的分离，可以重新编写一个原生的移动设备应用程序而不用大动干戈（同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端；）。
  • 高效。它对服务器压力很小，消耗更少的带宽，能够与面向服务的架构更好地结合。

单页面应用的缺点

  • 不利于SEO
  • 初次加载耗时增多
  • 导航不可用；前进、后退、地址栏等，需要程序进行管理；
  • 书签，需要程序来提供支持；

应用场景

那么单页应用的应用如何呢？看了一些资料，总觉出来单页面应用有两个硬伤：

  • 首屏加载（大量js导致首屏加载慢）
  • seo不友好

如何应用SPA或者是否应用SPA，大概需要考虑以下这几点：

  1. 交互体验
    不同的应用面对不同人群，会有不同的交互体验需求。
  2. 工程代价
    大型网站转spa会有很大的代价。
  3. 容错问题
    SPA所有脚本都加进来，如果出现一个JS错误，那很可能整个网站就挂掉了，风险很大。
  4. 是否必要
    简单呈现内容的网站，没有必要用spa。增加了开发和调试的复杂性，但是除了效果更酷炫点，没有多少实用价值。
  5. 是否需要兼容低版本的ie浏览器
    这个真的是……

想法

综合了解了这种SPA单页应用和传统的多页面应用，在以后的开发中，我可能会采取单页和多页相结合的方式，该跳转的地方还是跳转，结合单页模式的用户体验优点，将用户体验发挥到极致，因为我觉得用户体验是最重要的东西之一。