SPA 单页面应用

时间:2023-03-09 16:45:38
SPA 单页面应用

SPA一般只一个web页面,通过ajax,router等技术实现局部刷新,不会随着用户操作而出现重新加载页面或者页面跳转的功能,所有的用户操作都在一个页面实现。

组件化:UI组件和非UI组件

  传统的ui层:UI和逻辑混在一起,比如往往会在远程请求的回调中更改DOM

  分层带来的优势:每层的职责更专一,可以对其作单元测试的覆盖,以保证其质量

代码隔离:

  由于SPA把各种子功能的js代码聚集到一个作用域,因此代码的隔离和模块化很重要

代码合并和加载

  由于SPA界面基本都是动态生成的,所以不用担心文件加载从而阻塞渲染

路由和状态的管理

  比如说我们有一个功能,经历过多次导航菜单的点击,才呈现出来。如果用户想要把这个功能地址分享给别人,他怎么才能做到呢?

  具体做法就是把产品功能划分为若干状态,每个状态映射到相应的路由,然后通过pushState这样的机制,动态解析路由,有了路由之后,SPA就可以前进后退

缓存和本地存储

服务器通信

  webSocket实时通讯方式

内存管理

  传统的web页面一般不需要考虑内存管理,因为用户的停留时间相对少,即使出现内存泄露,可能很快的被刷新页面之类的咋偶哦冲掉。但SPA不会这样,因此我们对DOM操作、网路链接等要格外小心

特点:一个页面集成多种功能,不会随着用户的操作而重新加载页面或者进行页面的跳转,而是局部动态的变换HTML内容

优点:

  a.用户体验好、快,内容的改变不需要重新加载整个页面,不会出现页面假死的情况

   b.减少服务器的压力。

    服务器只管输出数据,不用管显示逻辑和页面合成,吞吐能力提高几倍

   c.良好的前后端分离。

    SPA和RESTFUL架构一起使用,后端不再负责渲染模板、输出页面工作,后端API通用化

   d.不存在页面多跳转情况下的页面状态传值问题

缺点:

   a.不利于SEO

   b.初次加载耗时相对大

   c.导航不可用(前进和后退的实现有一定的局限性)