单页面应用学习

Posted 2022-08-02 躬匠

最近一直在进行Vue的学习，发现最终生成的页面只有一个html，之后就是css、js、img了。与以往的应用很不同，仔细研究之后才发现这就是所谓的单页应用，于是有了这篇文章。今天我们就来一起了解一下SPA的相关概念、与传统Web应用的区别以及SPA的优缺点。

一、什么是SPA

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

与传统Web应用的区别也很明显了：传统Web应用可能是多个页面，链接跳转都会涉及到页面的重新加载。

二、优缺点

SPA的出现是富客户端发展的必然结果，但是该技术也是有些局限性，所以采用之前需要了解清楚它的优缺点。

1、优点

• 良好的交互体验

       用户不需要重新刷新页面，获取数据也是通过Ajax异步获取，页面显示流畅。

• 前后端完全解耦

      单页Web应用可以和RESTful规约一起使用，通过REST API提供接口数据，并使用Ajax异步获取，这样有助于分离客户端和服务器端工作。更进一步，可以在客户端也可以分解为静态页面和页面交互两个部分。

• 减轻服务器压力

     webpack工具对于返回的css js进行了打包以及部分合并，减轻了服务器的压力以及带宽。

• 代码复用

     不用修改后端程序代码就可以同时用于Web界面、手机、平板等多种客户端；

2、缺点

• 不利于SEO

       由于所有的内容都在一个页面中动态替换显示，所以在SEO上其有着天然的弱势。

• 前进、后退管理

       由于单页Web应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理，当然此问题也有解决方案，比如利用URI中的散列+iframe实现。

• 初次加载耗时多

       为实现单页Web应用功能及显示效果，需要在加载页面的时候将JavaScript、CSS统一加载，部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理，如果使用第三方库，建议使用一些大公司的CDN，因此带宽的消耗是必然的。对于Vue而言，可以使用其懒加载实现按需加载。

当然，与此相关的框架就有Angular 、Vue、React