使用Optimistic UI

Optimistic UI是什么

所谓Optimistic UI,直译过来就是“乐观的用户界面”。也叫延时补偿。
Optimistic UI是Meteor提出来的一种前端界面快速响应用户交互的概念 。其实它的本质很简单,就是用户进行一个操作之后,我们不用等服务器响应就对用户操作进行相应的一种操作。因为等服务器响应需要时间,而且宽带的不同,响应时间有一定的差异。

怎么使用Optimistic UI

我们使用Optimistic UI其实是在骗用户,再等待服务器响应(故称之为延时补偿)。流程大概如下:
Optimistic UI流程图.png

什么时候使用Optimistic UI

用户操作绝大几率都成功,并且成功后状态可控的情况下,我们可以先用Optimistic UI去“欺骗”用户,让用户觉得操作非常顺畅。事实上,为了保证数据和视图一致,切记一定要把用户的操作发送给服务器,以达到数据与视图完全一致。当且仅当这个操作不成功时,我们才从服务器获取数据来更新视图,纠正我们之前为了“欺骗”用户做的假象。

事例

我们先模拟一下不使用Optimistic UI且网速不快的情况下,用户交互的体验会是怎样。
那么这里牵扯出来一个问题,怎么模拟网速不快的情况呢?很简单,借用chrome开发者工具栏就可以简单模拟网速


设置网速
  • 不使用Optimistic UI且网速不快的情况下,我这里模拟fast 3g的网络(其实已经很慢了):


    NoOptimisticUI.gif
  • 使用Optimistic UI且网速更慢的情况下,我这里模拟slow 3g的网络(非常慢了):


    optimisticUI.gif

结论

比较上面两张效果图,会发现,就算网速更慢了,使用Optimistic UI的体验都会比不使用的好

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容