Optimistic UI是什么

所謂Optimistic UI，直譯過(guò)來(lái)就是“樂(lè)觀的用戶界面”。也叫延時(shí)補(bǔ)償。
Optimistic UI是Meteor提出來(lái)的一種前端界面快速響應(yīng)用戶交互的概念 。其實(shí)它的本質(zhì)很簡(jiǎn)單，就是用戶進(jìn)行一個(gè)操作之后，我們不用等服務(wù)器響應(yīng)就對(duì)用戶操作進(jìn)行相應(yīng)的一種操作。因?yàn)榈确?wù)器響應(yīng)需要時(shí)間，而且寬帶的不同，響應(yīng)時(shí)間有一定的差異。

怎么使用Optimistic UI

Optimistic UI流程圖.png

什么時(shí)候使用Optimistic UI

用戶操作絕大幾率都成功，并且成功后狀態(tài)可控的情況下，我們可以先用Optimistic UI去“欺騙”用戶，讓用戶覺(jué)得操作非常順暢。事實(shí)上，為了保證數(shù)據(jù)和視圖一致，切記一定要把用戶的操作發(fā)送給服務(wù)器，以達(dá)到數(shù)據(jù)與視圖完全一致。當(dāng)且僅當(dāng)這個(gè)操作不成功時(shí)，我們才從服務(wù)器獲取數(shù)據(jù)來(lái)更新視圖，糾正我們之前為了“欺騙”用戶做的假象。

事例

我們先模擬一下不使用Optimistic UI且網(wǎng)速不快的情況下，用戶交互的體驗(yàn)會(huì)是怎樣。
那么這里牽扯出來(lái)一個(gè)問(wèn)題，怎么模擬網(wǎng)速不快的情況呢？很簡(jiǎn)單，借用chrome開(kāi)發(fā)者工具欄就可以簡(jiǎn)單模擬網(wǎng)速

設(shè)置網(wǎng)速

• 不使用Optimistic UI且網(wǎng)速不快的情況下，我這里模擬fast 3g的網(wǎng)絡(luò)（其實(shí)已經(jīng)很慢了）：

  
  
  NoOptimisticUI.gif

• 使用Optimistic UI且網(wǎng)速更慢的情況下，我這里模擬slow 3g的網(wǎng)絡(luò)（非常慢了）：

  
  
  optimisticUI.gif

結(jié)論

比較上面兩張效果圖，會(huì)發(fā)現(xiàn)，就算網(wǎng)速更慢了，使用Optimistic UI的體驗(yàn)都會(huì)比不使用的好