對于Web開發(fā)者而言，除了具擁有精湛的開發(fā)技術(shù)外，還應(yīng)具備一些軟技能。而針對富Web應(yīng)用，開發(fā)者應(yīng)該注意哪些要點呢？小編認(rèn)為如何讓用戶以最快的時間獲得想要的數(shù)據(jù)尤為重要，開發(fā)者應(yīng)注重以下七大原則。

　　網(wǎng)絡(luò)上有關(guān)Web開發(fā)未來的熱門討論有很多，比如：JavaScript能否替代實現(xiàn)諸如歷史記錄、網(wǎng)頁瀏覽、頁面渲染等瀏覽器功能？開發(fā)者應(yīng)該放棄后端，直接進(jìn)行HTML渲染嗎？單頁面應(yīng)用會流行起來嗎？

　　要解答上述問題，我會嘗試以JavaScript為突破口，從用戶體驗方面進(jìn)行考慮;如何能讓用戶以最快的時間獲得想要的數(shù)據(jù)是我最為看重的。
 

 

　　1、服務(wù)器渲染是必須的

　　目前有個比較錯誤的分立觀點：“服務(wù)器渲染與單頁面應(yīng)用的對立。”如果我們真的想最大程度地提升用戶體驗和性能，把這兩者區(qū)別對待、互為排斥都不是好的解決方法。

　　首先，當(dāng)進(jìn)行頁面?zhèn)魉蜁r，互聯(lián)網(wǎng)連接本身有個理論速度限制。地理位置上兩點間的傳輸速度受到地域、帶寬、路由等因素影響;減少兩點之間往返的通訊次數(shù)顯得尤為關(guān)鍵。一個足夠靈活的系統(tǒng)應(yīng)當(dāng)能夠均衡好瀏覽器端和服務(wù)器端的代碼渲染工作，減少網(wǎng)站和網(wǎng)絡(luò)應(yīng)用之間的差別。

　　2、即時響應(yīng)用戶輸入

　　當(dāng)用戶訪問某個網(wǎng)站時，每個交互動作都應(yīng)該盡量做到少延遲、快響應(yīng)。

　　在HTML中文檔的連接是透過超鏈或標(biāo)簽完成的。當(dāng)點擊這些鏈接時，瀏覽器會發(fā)送一個請求，這個請求被接收和響應(yīng)前的用時是無法確定的。相反，JavaScript能夠針對用戶輸入做出即時的響應(yīng)。例如谷歌或百度，現(xiàn)在我們在其首頁進(jìn)行輸入時，不用點擊搜索或確定，瀏覽器會自動進(jìn)入搜索結(jié)果頁面;還有就是智能提醒，邊輸入邊提醒的功能也是非常人性化的。

　　3、響應(yīng)數(shù)據(jù)/狀態(tài)變更

　　現(xiàn)在無論是采用傳統(tǒng)的頁面刷新還是AJAX交互來對靜態(tài)頁面執(zhí)行更新都顯得稍稍落伍了。目前更好的做法是自行更新(self-updating)。

　　如果有款應(yīng)用同時打開了多個標(biāo)簽/頁面，如果用戶進(jìn)行了登出操作，所有已打開的標(biāo)簽都應(yīng)該能同時失效。要想做到類似的自行更新，狀態(tài)協(xié)調(diào)(state reconciliation)是需要多加考慮的。在只是更新少量數(shù)據(jù)的參合，我們往往很容易忽略了長時間連接中斷后該如何讓程序作出正確響應(yīng)。比方說休眠電腦數(shù)天后再打開，我們的程序該如何對這個狀態(tài)(如機(jī)器狀態(tài)標(biāo)識碼)進(jìn)行處理呢?如果我們想在初始頁面?zhèn)魉蛿?shù)據(jù)，在客戶端腳本裝載前必須確保數(shù)據(jù)是可訪問的。一旦發(fā)生連接中斷，腳本建立的初始連接必須能夠進(jìn)行會話恢復(fù)。
 

 

　　4、控制與服務(wù)器的數(shù)據(jù)交換

　　在萬維網(wǎng)中，客戶端和服務(wù)器端的數(shù)據(jù)交換一般限于已下幾種形式：

　　點擊連接，GET獲取了新的頁面，然后渲染這個頁面；

　　通過POST或GET提交表單，然后渲染新頁面；

　　異步裝入一個圖像或?qū)ο?，然后渲染它?/span>

　　其中，上述第二種方式最容易出問題。從性能角度來看，不斷觸發(fā)新頁面來發(fā)送數(shù)據(jù)是個效率極差的做法。

　　現(xiàn)在網(wǎng)絡(luò)上有豐富的APIs(如XMLHttpRequest,EventSource)不但能幫助我們很好地控制數(shù)據(jù)流向，同時能幫助增強(qiáng)用戶體驗，如表單的填寫、發(fā)送。

　　如前述的狀態(tài)協(xié)調(diào)，如果程序檢測到連接中斷后，把數(shù)據(jù)暫存起來將能幫助日后的會話恢復(fù)。服務(wù)工作器(Serviceworker)的引入在這時就變得非常重要了。它能夠讓JavaScript Web應(yīng)用在后臺運(yùn)行。即使程序沒有開啟，我們?nèi)匀荒軌蛟诤笈_同步用戶數(shù)據(jù)。

　　5、增強(qiáng)歷史記錄處理

　　一般來說，頁面狀態(tài)的過渡依賴于URL的變更;這給我們帶來了增強(qiáng)歷史記錄管控的機(jī)會。

　　例如，我們通過手機(jī)應(yīng)用查看商品時，發(fā)現(xiàn)了心儀物品，一般情況下如果這時候進(jìn)行購物車操作都會中止當(dāng)前界面的訪問;購物完畢后點擊返回，如果先前已經(jīng)翻看了很多頁并滾動到某個位置，如果這時能根據(jù)歷史記錄準(zhǔn)確地返回之前的位置，用戶會對此非常贊賞的。再譬如，我們填寫了某個表單，如果發(fā)送失敗，點擊返回后能自動幫助用戶把已經(jīng)填好的數(shù)據(jù)進(jìn)行恢復(fù)，這也是能極大增強(qiáng)用戶體驗的。

　　6、推進(jìn)代碼變更

　　如果程序的代碼發(fā)生變更，采用什么方法來使客戶端對此做出正確響應(yīng)是很重要的。

　　一個好的代碼更新推送機(jī)制是如果發(fā)現(xiàn)有新的版本，能夠及時提醒客戶端對此進(jìn)行選擇處理。又或者是在HTTP請求的頭部信息中附加版本號信息，讓服務(wù)器針對版本號作出正確處理。

　　更好的一個處理方法是進(jìn)行熱代碼重載(hot code reloading)。它的意思是不需要對整個頁面進(jìn)行刷新，而只是對變更關(guān)聯(lián)部分或模塊進(jìn)行在線更新。這需要對全局影響進(jìn)行全面評估，防止部分模塊更新后出現(xiàn)其它異常。

　　7、預(yù)先感知

　　一個豐富的JavaScript應(yīng)用能夠有效識別用戶輸入并做出預(yù)感反饋。

　　典型的例子是當(dāng)鼠標(biāo)懸停在某個鏈接時，服務(wù)器已經(jīng)開始著手準(zhǔn)備數(shù)據(jù)，這將極大地減少渲染新頁面用時。還有就是能針對鼠標(biāo)動作做出交互反饋，如移動，碰撞，移出/入等。