Google官方開(kāi)發(fā)指南：提升移動(dòng)Web性能表現(xiàn)的四大建議
移動(dòng)互聯(lián)網(wǎng)已經(jīng)在全球得到了廣泛的應(yīng)用。到2009年，有50%的新增的互聯(lián)網(wǎng)訪問(wèn)都是來(lái)自手機(jī)設(shè)備的(eMarket，2008和2009)。來(lái)自Google的內(nèi)部資料顯示，隨著移動(dòng)瀏覽器的提升，用戶的瀏覽習(xí)慣也在逐步改進(jìn)。
移動(dòng)瀏覽器上的頁(yè)面布局與桌面瀏覽器有著顯著的差異，所以，想要在移動(dòng)設(shè)備上開(kāi)發(fā)出優(yōu)秀的瀏覽器，有些注意事項(xiàng)是需要開(kāi)發(fā)者事先了解的。對(duì)于如何在移動(dòng)設(shè)備上開(kāi)發(fā)出高性能、體驗(yàn)良好的web應(yīng)用，Google網(wǎng)絡(luò)管理員Jeremy Weinstein給出了幾點(diǎn)技術(shù)和非技術(shù)方面的建議(譯者注：原文來(lái)自Google Code，可以認(rèn)為是Google官方的開(kāi)發(fā)指南)。
讓你的網(wǎng)頁(yè)和Apps更適合移動(dòng)設(shè)備訪問(wèn)
1.在桌面版應(yīng)用上提供一個(gè)顯著的移動(dòng)版入口
如果你有一個(gè)包含大量圖像的網(wǎng)站，當(dāng)你為它開(kāi)發(fā)了一個(gè)移動(dòng)版本，你是否還希望移動(dòng)用戶繼續(xù)使用原來(lái)的桌面版?確保讓用戶知道你的網(wǎng)站還有一個(gè)移動(dòng)版本存在。
2.移動(dòng)URL要遵循習(xí)慣用法，并推廣之
雖然沒(méi)有規(guī)定你必須把原來(lái)桌面服務(wù)的移動(dòng)版的地址設(shè)置成什么樣，但是這里有些地址設(shè)計(jì)的慣例可以參考：m.yoursite.com，mobile.yoursite.com 或是yoursite.com/mobile。選擇一個(gè)簡(jiǎn)單的移動(dòng)URL，并且將它貼在原來(lái)的桌面網(wǎng)站上。
3.設(shè)計(jì)一個(gè)與移動(dòng)設(shè)備相適應(yīng)的用戶界面
盡量避免讓用戶輸入過(guò)多的信息。提供更多的點(diǎn)擊功能。將URL設(shè)計(jì)得盡量短一點(diǎn)，方便用戶輸入。選取合適的UI組件和功能，使得你的應(yīng)用在小屏幕上能夠方便地顯示和操作。多考慮一下用戶的訪問(wèn)情景——或許不是舒服地坐在椅子上，所以盡量讓用戶能夠快速找到想要的信息。確保你的信息足夠的清晰簡(jiǎn)潔。
Gmail提供了一個(gè)移動(dòng)版本，更加符合移動(dòng)設(shè)備的訪問(wèn)方式
4.讓你的網(wǎng)站適合各種移動(dòng)瀏覽器的訪問(wèn)
目前存在著全功能(Mobile Safari, Android等)，半功能(BlackBerry)，以及低功能(舊款的翻蓋手機(jī))瀏覽器。想想如何讓你的移動(dòng)web頁(yè)面既能在150×128像素的屏幕上顯示，又能在640×480像素的屏幕上顯示。不同國(guó)家的移動(dòng)瀏覽器標(biāo)準(zhǔn)也有所不同。如果你的用戶來(lái)自不同的國(guó)家，確保你的設(shè)計(jì)能夠符合這些國(guó)家的設(shè)備標(biāo)準(zhǔn)。
減少請(qǐng)求和數(shù)據(jù)的傳輸
為了減少延遲現(xiàn)象的發(fā)生，你的網(wǎng)站或應(yīng)用程序應(yīng)該盡量避免向服務(wù)器發(fā)送請(qǐng)求。在TCP和socket機(jī)制中，一次大數(shù)據(jù)的請(qǐng)求傳輸比多次小數(shù)據(jù)的請(qǐng)求傳輸速度要快。這一點(diǎn)在移動(dòng)開(kāi)發(fā)中顯得尤為重要。
使用CSS Sprite處理你的圖片，或者將你的圖片轉(zhuǎn)換為data URI scheme?？梢詤⒖糋oogle Search搜索結(jié)果頁(yè)面上的logo圖標(biāo)，它就用到了CSS sprite。Google的一些服務(wù)(例如Wave)通過(guò)使用data URI scheme將靜態(tài)的請(qǐng)求固化，用于在web頁(yè)面中內(nèi)聯(lián)靜態(tài)數(shù)據(jù)。(data URI技術(shù)無(wú)法在舊版本的瀏覽器上使用，它是專門(mén)為iPhone，Android和其他***的移動(dòng)web瀏覽器上的網(wǎng)頁(yè)和應(yīng)用程序設(shè)計(jì)的。)
如果你的圖片里面包含base64的字符串，那么在壓縮的時(shí)候可能會(huì)丟失部分?jǐn)?shù)據(jù)(這種格式的圖片在傳輸時(shí)必須使用gzip壓縮)。但即使這樣，也盡量不要?jiǎng)?chuàng)建一個(gè)新的連接或是發(fā)送一個(gè)新的HTTP請(qǐng)求。
如果你的應(yīng)用包含了一個(gè)CSS文件，那么它還需要導(dǎo)入一些其他的資源;如果包含的是一個(gè)JavaScript文件，那么也需要下載一下額外的代碼，將你的網(wǎng)頁(yè)需要下載的信息全部放到一個(gè)文件中。將你的請(qǐng)求放到一個(gè)文件中將提升你的應(yīng)用的速度。
1.簡(jiǎn)化代碼
代碼越少，傳輸?shù)臄?shù)據(jù)越小，你的網(wǎng)頁(yè)打開(kāi)得越快。減少傳輸?shù)臄?shù)據(jù)量不如減少通訊次數(shù)有效，對(duì)于高延遲的移動(dòng)連接，每減少一個(gè)bit都將有助于提升你的應(yīng)用加載速度。可以看看一篇關(guān)于HTML optional tags and CSS optimization的文章。
2.避免重定向
有時(shí)Web頁(yè)面和Web服務(wù)會(huì)對(duì)某個(gè)請(qǐng)求多次重定向。如果你的服務(wù)需要對(duì)請(qǐng)求重定向，那么盡量在服務(wù)器端處理，而不是在客戶端，盡可能減少客戶端的網(wǎng)絡(luò)交互次數(shù)。
3.預(yù)先考慮并拉長(zhǎng)內(nèi)容下載流程
只有在需要的時(shí)候才傳輸數(shù)據(jù)，可能的話盡可能提前下載數(shù)據(jù)。不要下載一些用戶根本看不到的圖片。在移動(dòng)設(shè)備上Time-to-text是非常重要的。如果你的設(shè)備在顯示一組圖片，可以考慮一起下載它前后的圖片以提升UI的速度，但是不要下載一些相隔太遠(yuǎn)的圖片。
可以看看Page Speed中的Web Performance Best Practices介紹。
充分利用HTML的新功能
1.在移動(dòng)應(yīng)用中使用Appilcation Cache
HTML5瀏覽器(Mobile Safari, Android)通過(guò)使用Application Cache能夠減少頁(yè)面啟動(dòng)時(shí)間，并且允許用戶離線訪問(wèn)。
2.如果可能的話，盡量用CSS3替代圖片
支持CSS3的HTML5瀏覽器能使用各種豐富的屬性，如圓角、漸變色、陰影、文本轉(zhuǎn)換、畫(huà)布等等。使用CSS替代圖片來(lái)裝飾你的頁(yè)面能夠減少數(shù)據(jù)傳輸?shù)拈_(kāi)銷。
Google的移動(dòng)Apps上已經(jīng)使用了HTML5提供的新的APIs。例如Mobile Gmail就用到了Application Cache。Mobile Google Search則使用了HTML5 Geolocation API 來(lái)展示搜索到的定位結(jié)果。Google Maps for Mobile以及Mobile Gmai都使用了canvas 標(biāo)志來(lái)避免圖片的傳輸。
查看有關(guān)HTML 5和移動(dòng)web App的文章。
3.將***配置設(shè)備上運(yùn)行環(huán)境考慮在內(nèi)
如果你想讓更多的用戶訪問(wèn)你的網(wǎng)頁(yè)或是app，那么你必須確保你的應(yīng)用能夠在各種設(shè)備上兼容。簡(jiǎn)潔的代碼不僅使得你的應(yīng)用響應(yīng)更快，通常還會(huì)使得應(yīng)用具有更好的兼容性。
一些忠告：
◆ 即使是iPhone或Android這樣的瀏覽器現(xiàn)在也不支持Flash，不要在移動(dòng)網(wǎng)站中使用Flash。
◆ 許多BlackBerry手機(jī)默認(rèn)禁用CSS和JavaScript，不要指望用戶懂得在菜單中開(kāi)啟這些功能。
◆ 在性能較差的移動(dòng)設(shè)備上運(yùn)行JavaScript的代價(jià)太高。除了優(yōu)化網(wǎng)絡(luò)處理，還應(yīng)該盡量使客戶端的代碼精煉高效，要盡量減少應(yīng)用對(duì)內(nèi)存的占用。
測(cè)試，測(cè)試用例
如果你是一個(gè)web開(kāi)發(fā)者，那么你應(yīng)該對(duì)跨桌面web瀏覽器開(kāi)發(fā)的痛苦深有體會(huì)了?？鐬g覽器測(cè)試對(duì)于移動(dòng)設(shè)備開(kāi)發(fā)是非常重要的一項(xiàng)工作。
為了使得應(yīng)用適應(yīng)各種移動(dòng)設(shè)備的屏幕，移動(dòng)瀏覽器需要靈活地調(diào)整文本、圖像以及CSS的顯示方式。
在你手掌上訪問(wèn)移動(dòng)web網(wǎng)頁(yè)或是使用移動(dòng)app的體驗(yàn)與在PC機(jī)上的體驗(yàn)是非常不同的。不要用你在PC上的交互體驗(yàn)代替你在移動(dòng)設(shè)備上的體驗(yàn)測(cè)試。
測(cè)試資源：
User Agent Switcher extension for Firefox. 更換桌面上的用戶代理，檢測(cè)在更換代理后網(wǎng)頁(yè)能否繼續(xù)正常顯示。
Page Speed Firefox/Firebug Addon.評(píng)估網(wǎng)頁(yè)的性能并給出改善建議。
其他資料
原文出處：Make the mobile web faster
譯文出處：WebAppTrend(WebAppTrend是一個(gè)獨(dú)立技術(shù)博客，主要關(guān)注Web App發(fā)展前沿與實(shí)踐，以及智能瀏覽器發(fā)展。)
【編輯推薦】
