单页面应用 Single Page

单页面应用 Single Page

什么是单页面应用？

也就是指我们的系统只加载一次页面，剩下的页面切换交给路由去处理。页面中的数据替换则是交给 JavaScript 和 Ajax 处理。这些操作处理中页面是不会进行刷新的。

在传统的模式中，如果是传统的前后端不分离，你每次修改页面中的数据基本上都要重新请求服务器资源，然后刷新整个页面进行重新渲染。在后来就是传统模式的前后端分离，可以通过 Ajax 获取数据，通过 JavaScript 给指定 DOM 进行替换内容。但是这种方式的页面切换时，也是会刷新整个页面的，而且一般都是通过 a 标签进行页面跳转，或者是 JavaScript 的 location.href 属性进行页面跳转。

刷新整个页面，使得页面所有元素进行重新渲染，这个是很消耗计算机性能开销的。路由的工作原理，基本上就是在一个页面内进行模块切换，把上一个模块在 DOM 移除，把新的模块在 DOM 中新增，就很类似 Vue 中的 v-if 指令。往后面的趋势基本上都是单页面应用了。

优点

• 良好的交互体验，切换页面时是看不到页面刷新效果的，平时的刷新页面都会空白几秒，用户体验很差
• 优秀的架构，前后端分离，前端负责界面的展示，后端负责数据的存储和计算
• 资源加载的次数少，性能有很好的提升，基本上都是按需加载/替换内容

缺点

• 不利于 SEO 优化，因为整个页面在 Vue 实例化之前只有一个 <div id="app"></div> 标签。基本上就是一个空白的页面
• 单页面应用不能使用浏览器的前进后退，因为它本来就没有切换页面。页面切换需要建立自己的堆栈管理
• 单页首次加载耗时会比较长，也就是会白屏一会，因为要把资源都加载进来。但是加载完毕之后的性能会大幅提升。

原文链接：菜园前端