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

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

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

 

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

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

　　首先，當(dāng)進(jìn)行頁(yè)面?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)用戶訪問(wèn)某個(gè)網(wǎng)站時(shí)，每個(gè)交互動(dòng)作都應(yīng)該盡量做到少延遲、快響應(yīng)。

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

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

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

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

 

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

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

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

　　通過(guò)POST或GET提交表單，然后渲染新頁(yè)面；

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

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

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

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

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

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

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

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

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

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

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

　　7、預(yù)先感知

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

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