单页应用 (SPA)

一、什么是单页应用？

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

单页应用的说法是在JavaScript和AJAX技术比较成熟以后才出现的，指的是通过浏览器访问一个网站时，只需要加载一个入口页面，此后显示的内容和数据都不会再刷新浏览器页面。有了单页应用之后，传统的网站就被称为多页应用了。

二、单页应用和多页应用的区别

    单页应用(SPA)    多页应用(MPA)
结构    一个主页面 + 许多模块的组件    许多完整的页面
资源文件(css，js)    组件公用的资源只需要加载一次    每个页面都要自己加载公用的资源
刷新方式    页面局部刷新    整页刷新
url模式    a.com/#/page1    a.com/page1.html
a.com/#/page2    a.com/page1.html
用户体验    页面切换快，体验佳；当初次加载文件过多时，需要做相关的调优。    页面切换慢，网速慢的时候，体验尤其不好
适用场景(SEO)    对体验度和流畅度有较高要求的应用，不利于 SEO（可借助 SSR 优化 SEO），适用于经常切换页面的场景和数据传递较多，多表单的场景    适用于对 SEO 要求较高的应用
过渡动画    Vue 提供了 transition 的封装组件，容易实现    很难实现
内容更新    相关组件的切换，即局部更新    整体 HTML 的切换，费钱（重复 HTTP 请求）
路由模式    可以使用 hash ，也可以使用 history    普通链接跳转
数据传递    因为单页面，使用全局变量就好（Vuex）    cookie 、localStorage 等缓存方案，URL 参数，调用接口保存等
相关成本    前期开发成本较高，后期维护较为容易    前期开发成本低，后期维护就比较麻烦，因为可能一个功能需要改很多地方
html文件请求    第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容也变化了    每一次页面跳转的时候，后台服务器都会给返回一个新的html文档
首屏时间    首屏时间慢，首屏时需要请求一次html，同时还要发送一次js请求，两次请求回来了，首屏才会展示出来    首屏时间快，访问页面的时候，服务器返回一个 html，页面就会展示出来，这个过程只经历了一个HTTP请求

 三、单页应用开发的优缺点

优点 
（1） 有良好的交互体验
能提升页面切换体验，用户在访问应用页面是不会频繁的去切换浏览页面，从而避免了页面的重新加载；
（2）前后端分离开发
单页Web应用可以和 RESTful 规约一起使用，通过 REST API 提供接口数据，并使用 Ajax 异步获取，这样有助于分离客户端和服务器端工作。更进一步，可以在客户端也可以分解为静态页面和页面交互两个部分；
（3）减轻服务器压力
服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；
（4）共用一套后端程序代码
不用修改后端程序代码就可以同时用于 Web 界面、手机、平板等多种客户端；

缺点
（1）SEO难度较高
由于所有的内容都在一个页面中动态替换显示，所以在SEO上其有着天然的弱势，所以如果你的站点对SEO很看重，且要用单页应用，那么就做些静态页面给搜索引擎用吧；
（2）前进、后退管理
由于单页Web应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理，当然此问题也有解决方案，比如利用URI中的散列+iframe实现；
（3）初次加载耗时多
为实现单页Web应用功能及显示效果，需要在加载页面的时候将JavaScript、CSS统一加载，部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理；