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.导航不可用(前进和后退的实现有一定的局限性)