怎么提升移動Web性能

這篇文章主要介紹“怎么提升移動Web性能”，在日常操作中，相信很多人在怎么提升移動Web性能問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么提升移動Web性能”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了利通免費(fèi)建站歡迎大家使用！

讓你的網(wǎng)頁和Apps更適合移動設(shè)備訪問

1.在桌面版應(yīng)用上提供一個顯著的移動版入口

如果你有一個包含大量圖像的網(wǎng)站，當(dāng)你為它開發(fā)了一個移動版本，你是否還希望移動用戶繼續(xù)使用原來的桌面版?確保讓用戶知道你的網(wǎng)站還有一個移動版本存在。

2.移動URL要遵循習(xí)慣用法，并推廣之

雖然沒有規(guī)定你必須把原來桌面服務(wù)的移動版的地址設(shè)置成什么樣，但是這里有些地址設(shè)計的慣例可以參考：m.yoursite.com，mobile.yoursite.com 或是yoursite.com/mobile。選擇一個簡單的移動URL，并且將它貼在原來的桌面網(wǎng)站上。

3.設(shè)計一個與移動設(shè)備相適應(yīng)的用戶界面

盡量避免讓用戶輸入過多的信息。提供更多的點(diǎn)擊功能。將URL設(shè)計得盡量短一點(diǎn)，方便用戶輸入。選取合適的UI組件和功能，使得你的應(yīng)用在小屏幕上能夠方便地顯示和操作。多考慮一下用戶的訪問情景——或許不是舒服地坐在椅子上，所以盡量讓用戶能夠快速找到想要的信息。確保你的信息足夠的清晰簡潔。

Gmail提供了一個移動版本，更加符合移動設(shè)備的訪問方式

4.讓你的網(wǎng)站適合各種移動瀏覽器的訪問

目前存在著全功能(Mobile Safari, Android等)，半功能(BlackBerry)，以及低功能(舊款的翻蓋手機(jī))瀏覽器。想想如何讓你的移動web頁面既能在150×128像素的屏幕上顯示，又能在640×480像素的屏幕上顯示。不同國家的移動瀏覽器標(biāo)準(zhǔn)也有所不同。如果你的用戶來自不同的國家，確保你的設(shè)計能夠符合這些國家的設(shè)備標(biāo)準(zhǔn)。

減少請求和數(shù)據(jù)的傳輸

為了減少延遲現(xiàn)象的發(fā)生，你的網(wǎng)站或應(yīng)用程序應(yīng)該盡量避免向服務(wù)器發(fā)送請求。在TCP和socket機(jī)制中，一次大數(shù)據(jù)的請求傳輸比多次小數(shù)據(jù)的請求傳輸速度要快。這一點(diǎn)在移動開發(fā)中顯得尤為重要。

使用CSS Sprite處理你的圖片，或者將你的圖片轉(zhuǎn)換為data URI scheme。可以參考Google Search搜索結(jié)果頁面上的logo圖標(biāo)，它就用到了CSS sprite。Google的一些服務(wù)(例如Wave)通過使用data URI scheme將靜態(tài)的請求固化，用于在web頁面中內(nèi)聯(lián)靜態(tài)數(shù)據(jù)。(data URI技術(shù)無法在舊版本的瀏覽器上使用，它是專門為iPhone，Android和其他***的移動web瀏覽器上的網(wǎng)頁和應(yīng)用程序設(shè)計的。)

如果你的圖片里面包含base64的字符串，那么在壓縮的時候可能會丟失部分?jǐn)?shù)據(jù)(這種格式的圖片在傳輸時必須使用gzip壓縮)。但即使這樣，也盡量不要創(chuàng)建一個新的連接或是發(fā)送一個新的HTTP請求。

如果你的應(yīng)用包含了一個CSS文件，那么它還需要導(dǎo)入一些其他的資源;如果包含的是一個JavaScript文件，那么也需要下載一下額外的代碼，將你的網(wǎng)頁需要下載的信息全部放到一個文件中。將你的請求放到一個文件中將提升你的應(yīng)用的速度。

1.簡化代碼

代碼越少，傳輸?shù)臄?shù)據(jù)越小，你的網(wǎng)頁打開得越快。減少傳輸?shù)臄?shù)據(jù)量不如減少通訊次數(shù)有效，對于高延遲的移動連接，每減少一個bit都將有助于提升你的應(yīng)用加載速度。可以看看一篇關(guān)于HTML optional tags and CSS optimization的文章。

2.避免重定向

有時Web頁面和Web服務(wù)會對某個請求多次重定向。如果你的服務(wù)需要對請求重定向，那么盡量在服務(wù)器端處理，而不是在客戶端，盡可能減少客戶端的網(wǎng)絡(luò)交互次數(shù)。

3.預(yù)先考慮并拉長內(nèi)容下載流程

只有在需要的時候才傳輸數(shù)據(jù)，可能的話盡可能提前下載數(shù)據(jù)。不要下載一些用戶根本看不到的圖片。在移動設(shè)備上Time-to-text是非常重要的。如果你的設(shè)備在顯示一組圖片，可以考慮一起下載它前后的圖片以提升UI的速度，但是不要下載一些相隔太遠(yuǎn)的圖片。

可以看看Page Speed中的Web Performance Best Practices介紹。

充分利用HTML的新功能

1.在移動應(yīng)用中使用Appilcation Cache

HTML5瀏覽器(Mobile Safari, Android)通過使用Application Cache能夠減少頁面啟動時間，并且允許用戶離線訪問。

2.如果可能的話，盡量用CSS3替代圖片

支持CSS3的HTML5瀏覽器能使用各種豐富的屬性，如圓角、漸變色、陰影、文本轉(zhuǎn)換、畫布等等。使用CSS替代圖片來裝飾你的頁面能夠減少數(shù)據(jù)傳輸?shù)拈_銷。

Google的移動Apps上已經(jīng)使用了HTML5提供的新的APIs。例如Mobile Gmail就用到了Application Cache。Mobile Google Search則使用了HTML5 Geolocation API 來展示搜索到的定位結(jié)果。Google Maps for Mobile以及Mobile Gmai都使用了canvas 標(biāo)志來避免圖片的傳輸。

查看有關(guān)HTML 5和移動web App的文章。

3.將***配置設(shè)備上運(yùn)行環(huán)境考慮在內(nèi)

如果你想讓更多的用戶訪問你的網(wǎng)頁或是app，那么你必須確保你的應(yīng)用能夠在各種設(shè)備上兼容。簡潔的代碼不僅使得你的應(yīng)用響應(yīng)更快，通常還會使得應(yīng)用具有更好的兼容性。

到此，關(guān)于“怎么提升移動Web性能”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

當(dāng)前題目：怎么提升移動Web性能
標(biāo)題路徑：http://bm7419.com/article2/gipsoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、App開發(fā)、虛擬主機(jī)、網(wǎng)站收錄、Google、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)