单页面应用学习

Posted 躬匠

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了单页面应用学习相关的知识,希望对你有一定的参考价值。

最近一直在进行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

以上是关于单页面应用学习的主要内容,如果未能解决你的问题,请参考以下文章

Vue系列:单页面应用程序

vue单页面应用简单实现登录逻辑

单页面开发和多页面开发的区别

vue-router 入门学习

javascript 考虑到所有页面中始终存在心愿单,每次添加或删除项目时都会更新整个心愿单

30.多页应用VS单页应用