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

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

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

 

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

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

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

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

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

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

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

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

　　如果有款應(yīng)用同時(shí)打開了多個(gè)標(biāo)簽/頁面，如果用戶進(jìn)行了登出操作，所有已打開的標(biāo)簽都應(yīng)該能同時(shí)失效。要想做到類似的自行更新，狀態(tài)協(xié)調(diào)(state reconciliation)是需要多加考慮的。在只是更新少量數(shù)據(jù)的參合，我們往往很容易忽略了長時(shí)間連接中斷后該如何讓程序作出正確響應(yīng)。比方說休眠電腦數(shù)天后再打開，我們的程序該如何對這個(gè)狀態(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ù)交換一般限于已下幾種形式：

　　點(diǎn)擊連接，GET獲取了新的頁面，然后渲染這個(gè)頁面；

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

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

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

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

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

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

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

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

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

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

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

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

　　7、預(yù)先感知

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

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