在當(dāng)今的超級(jí)互聯(lián)世界中，網(wǎng)絡(luò)和移動(dòng)應(yīng)用程序的性能在推動(dòng)客戶的采納和參與方面發(fā)揮著前所未有的關(guān)鍵作用。終端用戶有著非常高的期望值，包括更快的頁(yè)面加載速度，更豐富、更引人入勝的網(wǎng)絡(luò)體驗(yàn)和應(yīng)用程序。

與此同時(shí)，移動(dòng)是快速發(fā)展的全球性現(xiàn)象，無(wú)論是業(yè)務(wù)、信息還是娛樂(lè)，移動(dòng)正在改變我們與內(nèi)容互動(dòng)的方式——。因此，通過(guò)快速高質(zhì)量的網(wǎng)絡(luò)體驗(yàn)與移動(dòng)用戶進(jìn)行互動(dòng)的能力成為一項(xiàng)業(yè)務(wù)要求，以及成功的首要條件。如果忽視移動(dòng)用戶的需求，就有可能損失很大一部分、甚至越來(lái)越多的業(yè)務(wù)。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)采用正在迅速增長(zhǎng)

然而，在這個(gè)美好的新世界提供快捷優(yōu)質(zhì)的體驗(yàn)并不容易，需要面臨跨越不同瀏覽器、屏幕尺寸、網(wǎng)絡(luò)和設(shè)備來(lái)優(yōu)化性能的挑戰(zhàn)。因此，企業(yè)尋求能夠同時(shí)適用于每種設(shè)備的技術(shù)，這一過(guò)程使響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)(RWD)應(yīng)運(yùn)而生。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)是一種網(wǎng)頁(yè)開(kāi)發(fā)方法，指網(wǎng)頁(yè)能夠應(yīng)響應(yīng)載入的環(huán)境(主要是屏幕尺寸)并相應(yīng)地更改用戶界面。這種技術(shù)包括一系列靈活的網(wǎng)格和布局組合、圖片以及對(duì)CSS3媒體查詢的智能運(yùn)用。RWD頁(yè)面包含了展示所有版本的網(wǎng)站，包括移動(dòng)和桌面視圖在內(nèi)所需的HTML。CSS和JavaScript會(huì)在瀏覽器中運(yùn)行，并會(huì)隱藏或修改內(nèi)容，以適應(yīng)屏幕尺寸。

RWD的使用與日俱增，一個(gè)原因就是RWD可在每次有新移動(dòng)設(shè)備類別進(jìn)入市場(chǎng)時(shí)，免于重新設(shè)計(jì)和開(kāi)發(fā)。

如前所述，采用RWD戰(zhàn)略聽(tīng)上去像是一個(gè)理想的解決方案。但是，它并不是改進(jìn)移動(dòng)用戶體驗(yàn)的殺手锏。事實(shí)上通過(guò)RWD網(wǎng)站成功與移動(dòng)用戶進(jìn)行互動(dòng)并不總是那么容易。隨著移動(dòng)設(shè)備變得更強(qiáng)大，網(wǎng)絡(luò)變得更快、更加一致，移動(dòng)終端用戶的期望值也會(huì)隨之增長(zhǎng)。

提供快速優(yōu)質(zhì)的網(wǎng)絡(luò)體驗(yàn)并不容易

如果RWD不是萬(wàn)能的，那么這類網(wǎng)站面臨的分發(fā)挑戰(zhàn)又是什么呢?在最近對(duì)RWD網(wǎng)站組成及其對(duì)網(wǎng)絡(luò)性能影響所做的調(diào)查中，347個(gè) RWD網(wǎng)站在不同的屏幕分辨率上進(jìn)行了測(cè)試，并且對(duì)比了在每種分辨率上下載每個(gè)頁(yè)面所需的字節(jié)數(shù)。調(diào)查結(jié)果顯示，72%的RWD網(wǎng)站在不同的屏幕分辨率上的尺寸都大致相同，22%的網(wǎng)站只是稍微小一點(diǎn)。

同樣重要的是，不僅大部分頁(yè)面會(huì)在不同的設(shè)備上提供相同的payload，并且相同的有效荷載也與頁(yè)面內(nèi)容更多的總體趨勢(shì)保持一致(平均頁(yè)面大小接近1.2MB)。

RWD開(kāi)發(fā)頁(yè)面帶來(lái)的一個(gè)更大更復(fù)雜的挑戰(zhàn)是它們必須交付到終端用戶的瀏覽器上，隨后這些瀏覽器需要對(duì)頁(yè)面進(jìn)行處理和渲染。在計(jì)算能力有限、動(dòng)力不足的移動(dòng)設(shè)備上，以及受限的無(wú)線和蜂窩網(wǎng)絡(luò)上，這會(huì)對(duì)用戶體驗(yàn)產(chǎn)生不利影響。

從終端用戶角度來(lái)看，在移動(dòng)設(shè)備上提供大型復(fù)雜頁(yè)面意味著什么?下圖顯示了一個(gè)終端用戶在各種同類最佳設(shè)備/網(wǎng)絡(luò)上訪問(wèn)美國(guó)零售商的RWD網(wǎng)站主頁(yè)的體驗(yàn)。圖中的性能指標(biāo)通過(guò)一個(gè)使用Safari遠(yuǎn)程調(diào)試功能的空瀏覽器緩存來(lái)捕捉。每個(gè)設(shè)備/網(wǎng)絡(luò)進(jìn)行的十項(xiàng)測(cè)試是通過(guò)下圖顯示的中間數(shù)字頁(yè)面加載時(shí)間(onLoadevent)而進(jìn)行的。結(jié)論顯而易見(jiàn)，在無(wú)線網(wǎng)絡(luò)上向移動(dòng)設(shè)備交付相對(duì)比較小的700KB網(wǎng)站也會(huì)導(dǎo)致嚴(yán)重的性能缺陷。

圖1：示例RWD網(wǎng)站并未達(dá)到終端用戶的性能期望值

從根本上說(shuō)，終端用戶并不關(guān)心在無(wú)線和蜂窩網(wǎng)絡(luò)上向受限設(shè)備提供優(yōu)質(zhì)速度的基礎(chǔ)技術(shù)挑戰(zhàn)。他們只要求網(wǎng)站能夠像他們希望的那樣快速加載和運(yùn)行。終端用戶期望值只會(huì)變得越來(lái)越高，相應(yīng)地，他們也希望網(wǎng)絡(luò)應(yīng)用程序變得更快、更豐富、更加引人入勝。

提供快速優(yōu)質(zhì)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)站的步驟

如何才能提供快速、高質(zhì)量的RWD網(wǎng)站?如前所述，RWD頁(yè)面包含了展示所有版本的網(wǎng)站，包括移動(dòng)和桌面視圖在內(nèi)所必要的HTML。CSS和JavaScript在瀏覽器中運(yùn)行，并會(huì)隱藏或修改內(nèi)容，以適應(yīng)屏幕尺寸。在智能手機(jī)上，這往往意味著瀏覽器需要下載并展示桌面網(wǎng)站所需的全部?jī)?nèi)容，讓CSS/JS隱藏絕大部分內(nèi)容。

第一步要關(guān)注真實(shí)頁(yè)面以及向終端用戶提供的相關(guān)對(duì)象。對(duì)于那些希望交付復(fù)雜RWD網(wǎng)站相關(guān)的開(kāi)發(fā)者來(lái)說(shuō)，也有多種選擇。首先，讓內(nèi)容盡可能地靠近終端用戶，例如使用CDN并充分利用SPDY(一個(gè)傳輸網(wǎng)絡(luò)內(nèi)容的開(kāi)放式網(wǎng)絡(luò)協(xié)議，與無(wú)線網(wǎng)絡(luò)尤為相關(guān))這樣的最佳交付機(jī)制。

接下來(lái)關(guān)注于RWD應(yīng)用程序、HTML、圖像、JavaScript 和CSS對(duì)象的組成要素。為了更快加載頁(yè)面，重點(diǎn)是：

· 減少請(qǐng)求數(shù)量

· 減少字節(jié)數(shù)量

· 加速渲染

下面我們來(lái)詳細(xì)探討這些因素。

減少請(qǐng)求數(shù)量

最快的請(qǐng)求是不發(fā)起請(qǐng)求。每個(gè)客戶端的HTTP請(qǐng)求和服務(wù)器相應(yīng)組合至少代表網(wǎng)絡(luò)上的一個(gè)往返。根據(jù)終端用戶的情況及其離原始服務(wù)器的距離，一個(gè)請(qǐng)求往返需要幾秒鐘來(lái)完成。一個(gè)網(wǎng)頁(yè)在渲染內(nèi)容之前需要幾十個(gè)HTTP請(qǐng)求，而這些請(qǐng)求往往會(huì)因?yàn)樘囟�瀏覽器限制的連接數(shù)量而彼此拖延。為了減少往返，需要使用多種技術(shù)來(lái)消除不必要的請(qǐng)求，如合并多個(gè)CSS和JavaScript文件，內(nèi)聯(lián)圖像，以及利用HTML5中新的緩存功能。

圖2：減少請(qǐng)求的一個(gè)簡(jiǎn)單的辦法就是將多個(gè)CSS或JavaScript文件合并到一個(gè)文件夾中

減少字節(jié)數(shù)

原理很簡(jiǎn)單：網(wǎng)頁(yè)越大(按字節(jié)數(shù)衡量)，在受限網(wǎng)絡(luò)上交付網(wǎng)頁(yè)的時(shí)間就越長(zhǎng)，處理器處理和渲染內(nèi)容的時(shí)間也就越長(zhǎng)。圖像尤其是RWD網(wǎng)站的一個(gè)難題，通過(guò)調(diào)整圖片格式、改進(jìn)緩存管理、壓縮文件以及刪除注釋、空格和圖像元數(shù)據(jù)等數(shù)據(jù)而將文件尺寸保持在可控范圍內(nèi)。自動(dòng)化解決方案旨在幫助為合適的設(shè)備提供合適的圖像分辨率，并避免過(guò)大圖像，無(wú)論是大屏幕還是小屏幕，在用戶能夠感知到的范圍內(nèi)保持圖像質(zhì)量。例如，有的頁(yè)面可專為加載當(dāng)前視窗內(nèi)可視的圖片而優(yōu)化。隨著用戶下拉頁(yè)面，新圖像按需加載。按需加載圖像有助于改進(jìn)頁(yè)面加載時(shí)間，還可在用戶沒(méi)有真正下拉頁(yè)面的情況下減少帶寬。特別是對(duì)RWD網(wǎng)站來(lái)說(shuō)，這種方式可以避免頁(yè)面下載隱藏圖片，同樣適用于顯示尺寸或情況。

加速渲染

處理網(wǎng)頁(yè)是一個(gè)復(fù)雜的流程。瀏覽器在加載時(shí)采用復(fù)雜的邏輯做出決策，例如哪些文件用串行方式下載，哪些用并行方式下載，哪些資源類型會(huì)阻止渲染，如何管理其連接。與此同時(shí)，瀏覽器必須解析和執(zhí)行復(fù)雜的HTML、CSS和JavaScript代碼，這些代碼往往沒(méi)有被明確定義。不幸的是，瀏覽器并不能提前識(shí)別網(wǎng)站，并會(huì)在處理頁(yè)面時(shí)被迫采用通用邏輯。新舊瀏覽器之間的邏輯變化受限于向后兼容，且不是根據(jù)網(wǎng)站定制。延遲打印樣式表、避免社交按鈕妨礙渲染，以及預(yù)取下個(gè)頁(yè)面等技術(shù)可引導(dǎo)瀏覽器做正確的事。因此，用戶就能獲得真正快速的用戶體驗(yàn)。

圖3：由于字節(jié)數(shù)和請(qǐng)求數(shù)量降低，優(yōu)化過(guò)的RWD網(wǎng)站速度明顯提高，且渲染速度更快。

結(jié)論

制作快速RWD網(wǎng)站未必容易，需要相當(dāng)多的專業(yè)知識(shí)和資源。只有在極少數(shù)的機(jī)構(gòu)內(nèi)部擁有足夠的開(kāi)發(fā)者或?qū)�業(yè)知識(shí)來(lái)采取這一措施。隨著RWD的演進(jìn)，這個(gè)為所有用戶提供快速優(yōu)質(zhì)的網(wǎng)絡(luò)體驗(yàn)的新模式也變得人所共知。尤其是一種名為RESS(Responsive Web Design + Server Side Components))的方法，似乎融合了當(dāng)前移動(dòng)交付技術(shù)的所有優(yōu)點(diǎn)，同時(shí)讓性能保持領(lǐng)先。此外，如前所述，對(duì)于那些希望交付復(fù)雜RWD網(wǎng)站相關(guān)的開(kāi)發(fā)者來(lái)說(shuō)，也有多種選擇。例如：將內(nèi)容遷移到內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)，這種技術(shù)可幫助加快網(wǎng)絡(luò)性能或充分利用SPDY這樣的最佳交付機(jī)制。我們?cè)谶@里重點(diǎn)介紹的技術(shù)也非常有用，一經(jīng)采用，能顯著提高交付快速優(yōu)質(zhì)網(wǎng)絡(luò)體驗(yàn)的能力，同時(shí)與你的移動(dòng)用戶進(jìn)行良好互動(dòng)。

關(guān)于作者

Lorenz Jakober是Akamai Technologies公司高級(jí)產(chǎn)品營(yíng)銷經(jīng)理，在網(wǎng)絡(luò)及移動(dòng)應(yīng)用程序設(shè)計(jì)、性能優(yōu)化、可用性和交付等領(lǐng)域有著豐富的經(jīng)驗(yàn)。他熱衷于就移動(dòng)和網(wǎng)絡(luò)性能主題發(fā)表演講并撰寫(xiě)博客。