響應式設計與性能優化整合應對移動挑戰

　　在當今的超級互聯世界中，網絡和移動應用程序的性能在推動客戶的采納和參與方面發揮著前所未有的關鍵作用。終端用戶有著非常高的期望值，包括更快的頁面加載速度，更豐富、更引人入勝的網絡體驗和應用程序。

　　與此同時，移動是快速發展的全球性現象，無論是業務、信息還是娛樂，移動正在改變我們與內容互動的方式——。因此，通過快速高質量的網絡體驗與移動用戶進行互動的能力成為一項業務要求，以及成功的首要條件。如果忽視移動用戶的需求，就有可能損失很大一部分、甚至越來越多的業務。

　　響應式網頁設計采用正在迅速增長

　　然而，在這個美好的新世界提供快捷優質的體驗并不容易，需要面臨跨越不同瀏覽器、屏幕尺寸、網絡和設備來優化性能的挑戰。因此，企業尋求能夠同時適用于每種設備的技術，這一過程使響應式網頁設計(RWD)應運而生。

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

　　RWD的使用與日俱增，一個原因就是RWD可在每次有新移動設備類別進入市場時，免于重新設計和開發。

　　如前所述，采用RWD戰略聽上去像是一個理想的解決方案。但是，它并不是改進移動用戶體驗的殺手锏。事實上通過RWD網站成功與移動用戶進行互動并不總是那么容易。隨著移動設備變得更強大，網絡變得更快、更加一致，移動終端用戶的期望值也會隨之增長。

　　提供快速優質的網絡體驗并不容易

　　如果RWD不是萬能的，那么這類網站面臨的分發挑戰又是什么呢?在最近對RWD網站組成及其對網絡性能影響所做的調查中，347個 RWD網站在不同的屏幕分辨率上進行了測試，并且對比了在每種分辨率上下載每個頁面所需的字節數。調查結果顯示，72%的RWD網站在不同的屏幕分辨率上的尺寸都大致相同，22%的網站只是稍微小一點。

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

　　RWD開發頁面帶來的一個更大更復雜的挑戰是它們必須交付到終端用戶的瀏覽器上，隨后這些瀏覽器需要對頁面進行處理和渲染。在計算能力有限、動力不足的移動設備上，以及受限的無線和蜂窩網絡上，這會對用戶體驗產生不利影響。

　　從終端用戶角度來看，在移動設備上提供大型復雜頁面意味著什么?下圖顯示了一個終端用戶在各種同類最佳設備/網絡上訪問美國零售商的RWD網站主頁的體驗。圖中的性能指標通過一個使用Safari遠程調試功能的空瀏覽器緩存來捕捉。每個設備/網絡進行的十項測試是通過下圖顯示的中間數字頁面加載時間(onLoadevent)而進行的。結論顯而易見，在無線網絡上向移動設備交付相對比較小的700KB網站也會導致嚴重的性能缺陷。

　　圖1：示例RWD網站并未達到終端用戶的性能期望值

　　從根本上說，終端用戶并不關心在無線和蜂窩網絡上向受限設備提供優質速度的基礎技術挑戰。他們只要求網站能夠像他們希望的那樣快速加載和運行。終端用戶期望值只會變得越來越高，相應地，他們也希望網絡應用程序變得更快、更豐富、更加引人入勝。

　　提供快速優質響應式網頁設計網站的步驟

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

　　第一步要關注真實頁面以及向終端用戶提供的相關對象。對于那些希望交付復雜RWD網站相關的開發者來說，也有多種選擇。首先，讓內容盡可能地靠近終端用戶，例如使用CDN并充分利用SPDY(一個傳輸網絡內容的開放式網絡協議，與無線網絡尤為相關)這樣的最佳交付機制。

　　接下來關注于RWD應用程序、HTML、圖像、JavaScript 和CSS對象的組成要素。為了更快加載頁面，重點是：

　　· 減少請求數量

　　· 減少字節數量

　　· 加速渲染

　　下面我們來詳細探討這些因素。

　　減少請求數量

　　最快的請求是不發起請求。每個客戶端的HTTP請求和服務器相應組合至少代表網絡上的一個往返。根據終端用戶的情況及其離原始服務器的距離，一個請求往返需要幾秒鐘來完成。一個網頁在渲染內容之前需要幾十個HTTP請求，而這些請求往往會因為特定瀏覽器限制的連接數量而彼此拖延。為了減少往返，需要使用多種技術來消除不必要的請求，如合并多個CSS和JavaScript文件，內聯圖像，以及利用HTML5中新的緩存功能。

　　圖2：減少請求的一個簡單的辦法就是將多個CSS或JavaScript文件合并到一個文件夾中

　　減少字節數

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

原文轉自：http://database.ctocio.com.cn/403/12837903_2.shtml