使用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的体验都会比不使用的好