如何增强单页应用的体验

Posted 前端大全

tags:

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

来源:徐飞(@民工精髓V) 

链接:https://github.com/xufei/blog/issues/35


什么是单页应用


所谓单页应用,指的是在一个页面上集成多种功能,甚至整个系统就只有一个页面,所有的业务功能都是它的子模块,通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华,把AJAX的无刷新机制发挥到极致,因此能造就与桌面程序媲美的流畅用户体验。


单页应用的优势


操作体验流畅,媲美本地应用的感觉,切换过程中不会频繁有被“打断”的感觉。

因为界面框架都在本地,与服务端的通讯基本只有数据,所以便于迁移,可以用比较小的代价,迁移成桌面产品,或者各种移动端Hybrid产品。


单页应用的弱点


  • 对搜索引擎不友好

  • 开发难度相对较高


如何尽可能增强单页应用的操作体验?


- 路由的规划

- 推送的使用

- 断线重连机制

- 操作补偿机制

- 本地缓存

- 热更新

- 良好的内存管理

- 服务端预渲染


1. 什么叫做路由?


路由可以理解为url与界面状态的对应关系。


我们需要注意到,在理想状态下,url和界面状态应当是精确对应的。比如说,对同一个用户来说,两次使用同一个url所打开的界面,其状态应当是完全一致的。对于同一个界面,进行相同的操作之后,url应当能够精确反馈当前状态。


但是我们需要注意到,细碎操作如果都需要跟路由保持同步,会是一个非常繁琐的事情,所以在设计过程中应当加以取舍,舍弃那些过于细碎的状态与路由的同步。


2. 服务端推送


推送的意思是,某些情况下,即使页面开着不动,服务端也主动发送消息过来,让界面能够有所体现。通常我们会使用WebSocket之类的技术来实现这种体验。


有时候,我们可能会看到一些在页面上使用推送的场景,最常见的是即时消息。


比如说,我们在应用里加一个聊天窗口,其他人发一条消息,自己这边能够实时展现出来。


如果是为了极致的用户体验,我们可以把整个应用的业务变更都使用推送,比如:


我在查看某条任务的时候,有人修改了这条任务,我这里应该不需要做什么操作,就能自动体现出他的修改。


如果对全业务的变更都做推送管理,使用体验会大为加强,但是,实现难度和代码复杂度会急剧上升。


3. 断线重连机制


我们如何判断一个单页面产品的技术水准呢?可以通过这样一种方式:


连续开几天不关,不需要通过“刷新”这个操作来解决一些常见问题。


为什么这个事情能够体现技术水准呢?因为要把这个事情做到极致,需要把这几件事情做好:


  • 断线重连机制

  • 良好的内存管理

  • 版本的自动升级


因为移动办公普及之类的情况,导致我们可能需要面对一些情况,比如,切换了网络,电脑休眠再打开之类,当再次联网的时候,就需要去重新链接,并且,对这个过程中发生的业务变更进行“补课”,然后逐一应用到界面上来,把界面调整到最新状态。


4. 操作补偿机制


什么是操作补偿呢?


从逻辑上来讲,当我们在界面上操作,创建一条任务的时候,新的这条任务不应当立刻显示出来,而是应当等到服务端确认成功了,才加到界面上。但很可能我们的网络不好,这一步用户要等很久。从用户体验的角度,这样是不好的,所以我们可以先把界面放上去,然后等创建成功的消息回来之后,再把一些唯一标识之类的东西回填到内存数据中。


单步的操作补偿还算是不太难,如果有多步的话,就非常麻烦了,举个极端情况的例子来说,用户新增了一条任务,服务端还没返回的时候,他就立刻在这条任务下创建子任务,但子任务这时候没有父任务的id,如果想给这步也做操作补偿,就比较麻烦了。甚至说,连续进行了几步操作之后,发现之前的操作失败了,后续处理会非常复杂。


5. 本地缓存的使用


上面提到,如果多步连续操作中间出现了失败,局面会比较尴尬,比如你填了好多东西,提交的时候才发现网络坏了,那就非常头疼,这时候,用户会非常期望这些数据能够保存下来,等网络好了再重新尝试。


我们可以使用本地缓存来临时存储这些数据。如果这个层面做到极致,能够结合良好设计的操作补偿机制,甚至可以让用户脱机使用我们的应用,把所有产生的这些变更都缓存,等到联网的时候再批量同步合并回去。


6. 热更新


前面提到,用户有可能长期开着我们的应用,然后中间一直没有刷新。正常情况下,业务变更都应当会被全部推送过来,界面所反馈的状况始终是最新的,符合现状的。但我们需要考虑到另外一个问题,系统升级怎么办?


我们当然可以推送一个通知:本系统已经升级了,请点击刷新。但能不能做得更好?这是有可能的,要达到这种目的,就要使用热更新这种手段,把代码的模块化和变更管理都做到极致,每次更新的代码模块也推送过来,并且作为补丁应用到当前系统上。这种机制对开发团队的水准要求很高。


7. 良好的内存管理


要想让用户能够长期开着应用,还需要管理好内存。


数据的变动、路由的切换、组件的创建与销毁,都会带来内存的变化。完美的内存控制是几乎做不到的,如果要追求这方面的极致,对开发过程的影响会非常大,很多情况下是不划算的,所以,可以做一些针对优化,把比较常规的问题解决掉,不用的东西及时销毁。


8. 服务端预渲染


作为一个单页应用,很经典的模式就是前后端完全分离,前端加载界面和逻辑,后端响应数据,前端根据这些数据,“生成”相应的变化。


注意到,我们这里有一个“生成”的过程,通常我们也会把这个过程称为“渲染”。它的机制就是根据数据生成对应的界面,如果是在浏览器侧生成这个界面,首先,加载界面模板或者逻辑,需要一次请求,然后,等这块准备好了,还需要去请求数据,这时候又多了一次网络请求。网络请求通常是比“生成界面”慢的,并且很可能这个时间不稳定,这时候就可能延误了用户第一次看到界面的时间。


虽然单页应用跟服务端渲染是存在矛盾的,但我们仍然可以部分优化这个事情,比如把某些页面由服务端直接代入数据生成。现在有一些开发框架也在尝试从另外一个层面解决这个问题,那就是对客户端和服务端渲染提取共性,使用合适的抽象方式来同时描述这两种机制,从而仅仅依靠配置的变更就可以切换渲染机制。


小结


我们提到了这些能够提升单页应用体验的方式,如果实现出来,肯定是可以让使用者非常愉悦的,但需要冷静权衡理想与现实之间的差距:


  • 我要做的是一个怎样的东西?

  • 我的开发团队是怎样的实力?

  • 我们有怎样的历史负担?

  • 值不值得这么做?

  • 能不能做得了?


本文中提到的这些体验增强方式,都是需要去权衡实现的,做得越多,所需要的技术掌控能力越强,出错概率也越高。


有一句著名的表达式:


E = MC^2


我们可以对此有不一样的解读:


Errors = (More Code) ^ 2



------------- 推荐 -------------


范品社推出的极客T恤,含程序员、电影、美剧和物理题材,面料舒适、100%纯棉,有黑、白、灰、藏青色,单件 ¥59.9、两件减¥12、四件减¥28、六件减¥42,详见网店商品页介绍。



(上面为部分 T 恤款式)



淘口令:复制以下红色内容,然后打开手淘即可购买


范品社,使用¥极客T恤¥抢先预览(长按复制整段文案,打开手机淘宝即可进入活动内容)

以上是关于如何增强单页应用的体验的主要内容,如果未能解决你的问题,请参考以下文章

前端技术专家民工精髓V:如何增强单页应用的体验

5 个单页应用用户体验的最佳实践

单页应用的泛滥

s-s-r 是不是会降低单页应用程序的用户体验? [关闭]

好程序员web前端分享如何构建单页Web应用

单页应用SEO浅谈 - 腾讯ISUX