在這篇文章中，我們會(huì)談到移動(dòng)互聯(lián)網(wǎng)和響應(yīng)式設(shè)計(jì)的關(guān)系，首先將介紹如何巧妙的運(yùn)用響應(yīng)式設(shè)計(jì)，為什么性能對(duì)移動(dòng)端非常重要，為什么響應(yīng)式設(shè)計(jì)不能作為你網(wǎng)站的目標(biāo)，最后技術(shù)的性能問題幫助我們更好的理解這問題。

自2000年開始，設(shè)計(jì)者和開發(fā)者就把移動(dòng)設(shè)備的問題過于簡單化，以至于現(xiàn)在仍然有人認(rèn)為響應(yīng)式網(wǎng)頁設(shè)計(jì)能解決一切問題。

大家必須明白，凌駕于任何目標(biāo)，移動(dòng)網(wǎng)絡(luò)體驗(yàn)必須和閃電一樣快。迅速、實(shí)用、兼容的體驗(yàn)對(duì)所有移動(dòng)設(shè)備都是挑戰(zhàn)。當(dāng)你使用響應(yīng)式設(shè)計(jì)時(shí)，這些挑戰(zhàn)都存在。從一開始就重視性能會(huì)讓過程容易些。

響應(yīng)式設(shè)計(jì)是很棒，但不是萬能鑰匙。如果你在移動(dòng)設(shè)備上一味堅(jiān)持，在轉(zhuǎn)換率后就可能隱藏著性能問題。大約有11%的網(wǎng)站是響應(yīng)式，這個(gè)數(shù)字每月都在增長，所以現(xiàn)在是談?wù)撨@個(gè)問題的時(shí)機(jī)了。

據(jù)Guy Podjarny研究，72%的響應(yīng)式網(wǎng)站不分屏幕大小都提供相同的字節(jié)，盡管這會(huì)降低移動(dòng)網(wǎng)絡(luò)連接。不是所有用戶都有耐心等著網(wǎng)站加載。

對(duì)響應(yīng)式設(shè)計(jì)存在的問題有了基本認(rèn)識(shí)，我們就能減低它帶來的損失。

移動(dòng)網(wǎng)站來自過去

我不是說你不應(yīng)該采用響應(yīng)式設(shè)計(jì)或者去用m.*的子域名。事實(shí)上，現(xiàn)在社會(huì)分享無處不在，不分設(shè)備，分配給給文檔一個(gè)URL，這是聰明的做法。但這并不意味著一個(gè)單獨(dú)URL應(yīng)該提供相同的文檔或每一個(gè)設(shè)備都應(yīng)該下載相同的資源。

援引Ethan Marcotte的話，他創(chuàng)造了“響應(yīng)式網(wǎng)頁設(shè)計(jì)”這個(gè)術(shù)語。

最重要的是，響應(yīng)式網(wǎng)頁設(shè)計(jì)的初衷不是要取代移動(dòng)網(wǎng)頁。——Ethan Marcotte

交互、移動(dòng)、快速

如果我們能使用一些其他的技術(shù)，就可以實(shí)現(xiàn)獲得響應(yīng)式設(shè)計(jì)好處的同時(shí)，不影響移動(dòng)設(shè)備的性能。響應(yīng)式設(shè)計(jì)從來不是意味著要解決“性能”，這也是為什么我們不能因此指責(zé)它的原因。然而，相信它能解決你所有問題，這大錯(cuò)特錯(cuò)。

設(shè)計(jì)響應(yīng)式很重要，因?yàn)槲覀冃枰鉀Q跨桌面和移動(dòng)端視窗大小范圍的問題。但是只考慮屏幕大小就低估了移動(dòng)設(shè)備。桌面和移動(dòng)端的界限正在變得模糊，基于不同的設(shè)備對(duì)我們而言仍然有多種可能性。但是我們還不能通過媒體查詢來決定響應(yīng)式設(shè)計(jì)的功能。一些評(píng)論家稱之為“可靠的響應(yīng)式網(wǎng)頁設(shè)計(jì)”，然而另一些人則認(rèn)為它是伴隨現(xiàn)代視覺的響應(yīng)式網(wǎng)頁設(shè)計(jì)。在沒有了解其基本語義的情況下，我們需要搞清楚這個(gè)問題。

雖然沒有可應(yīng)用于各類文檔的萬全之策，但是能夠運(yùn)用一些技巧來改善現(xiàn)有響應(yīng)式的解決辦法，并且力求性能大化。

實(shí)現(xiàn)每一個(gè)文檔對(duì)所有的設(shè)備都使用相同的URL和相同的內(nèi)容，結(jié)構(gòu)不必要相同。

當(dāng)從零開始，遵循“移動(dòng)先行”的方法。

在一個(gè)真實(shí)設(shè)備上測試當(dāng)資源加載和顯示會(huì)發(fā)生什么。不要依賴調(diào)整你的桌面瀏覽器。

使用優(yōu)化工具測量和提高性能。

通過JavaScript傳輸響應(yīng)圖片，雖然我們更期盼著瀏覽器供應(yīng)商（例如srcset）能解決這個(gè)問題

當(dāng)你需要當(dāng)前設(shè)備具備加載條件時(shí)，只加載JavaScript，這會(huì)在onload事件之后發(fā)生。

對(duì)移動(dòng)設(shè)備，內(nèi)聯(lián)文檔的原始視圖，或者發(fā)送一屏顯示內(nèi)容。

使用下面一種或幾種技術(shù)應(yīng)用智能響應(yīng)式的解決方案：條件加載、按組響應(yīng)、服務(wù)器端層（如適應(yīng)性方法）。

條件加載

不要總是在CSS中依賴media queries，因?yàn)闉g覽器將會(huì)為所有設(shè)備加載和解析所有選擇器和樣式 （后面詳細(xì)討論）。這就意味著手機(jī)為了一個(gè)大屏要下載和解析CSS。因?yàn)镃SS塊的呈現(xiàn)，你要浪費(fèi)一些時(shí)間等待聯(lián)接成功。

在設(shè)備上用JavaScript的matchMedia查詢來代替CSS media queries，你知道這些內(nèi)容是不會(huì)變化的。例如，大家都知道iPhone不能動(dòng)態(tài)的轉(zhuǎn)換成iPad的規(guī)格，所以我們只在正在需要CSS時(shí)才用。

可以用特征檢測，例如 Modernizr，對(duì)UI和功能性做出更明智的決定而不是僅僅根據(jù)屏幕尺寸。

按組響應(yīng)

在處理簡單文檔、為臺(tái)式電腦和智能手機(jī)提供相同的HTML時(shí)，雖然為我們可以讓所有屏幕依賴一個(gè)單一的HTML基礎(chǔ)和響應(yīng)式設(shè)計(jì)，但這并不總是最好的解決方案。為什么呢？同樣是由于移動(dòng)設(shè)備的性能。

即使我們在服務(wù)器端儲(chǔ)存相同的文檔，但是根據(jù)設(shè)備組別的不同給用戶不同的文檔。舉個(gè)例子，為一個(gè)6英寸甚至更大的屏幕提供大的浮動(dòng)菜單，為一個(gè)小屏幕提供漢堡菜單。在每個(gè)組群里，使用響應(yīng)時(shí)技術(shù)以適應(yīng)不同的場景，例如肖像模式和風(fēng)景模式的轉(zhuǎn)換，切換iPhone（320像素寬）、5英寸Android設(shè)備（360英寸）和平板（400像素）。

服務(wù)器端層

智能響應(yīng)策略的最后一個(gè)選擇是服務(wù)器。

服務(wù)器端功能檢測和決策不是移動(dòng)網(wǎng)絡(luò)的新鮮玩意。類似 WURFL 和Device Atlas的庫在市場上有好多年，響應(yīng)

文章題目：如何優(yōu)化響應(yīng)式站點(diǎn)的移動(dòng)性能？
標(biāo)題URL：http://www.rwnh.cn/news25/85475.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、網(wǎng)站制作、網(wǎng)站策劃、定制開發(fā)、網(wǎng)站設(shè)計(jì)、微信小程序

廣告

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