欧美成人精品第一区二区三区,-亚洲综合偷拍欧美一区色-少妇亚洲一区二区19p-少妇3p欧美一区二区三区

淺談Web應(yīng)用開發(fā)的七大原則

2019-03-20 11:20:47分類:Web應(yīng)用開發(fā)11043

  對于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ù)是我最為看重的。
 

Web應(yīng)用開發(fā)
 

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

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

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

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

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

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

Web應(yīng)用開發(fā)
 

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

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

  點(diǎn)擊連接,GET獲取了新的頁面,然后渲染這個頁面;

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

  異步裝入一個圖像或?qū)ο螅缓箐秩舅?/span>

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

  現(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)翻看了很多頁并滾動到某個位置,如果這時(shí)能根據(jù)歷史記錄準(zhǔn)確地返回之前的位置,用戶會對此非常贊賞的。再譬如,我們填寫了某個表單,如果發(fā)送失敗,點(diǎn)擊返回后能自動幫助用戶把已經(jīng)填好的數(shù)據(jù)進(jìn)行恢復(fù),這也是能極大增強(qiáng)用戶體驗(yàn)的。

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

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

  一個好的代碼更新推送機(jī)制是如果發(fā)現(xiàn)有新的版本,能夠及時(shí)提醒客戶端對此進(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)懸停在某個鏈接時(shí),服務(wù)器已經(jīng)開始著手準(zhǔn)備數(shù)據(jù),這將極大地減少渲染新頁面用時(shí)。還有就是能針對鼠標(biāo)動作做出交互反饋,如移動,碰撞,移出/入等。

上一篇:下一篇: