響應式Web設計（四）：響應式Web設計的優化

這篇文章主要說說在進行響應式Web設計的過程當中，涉及到頁面的一些須要進行優化的地方：

一、  輕量級的Javascript庫：

針對PC端網頁固然會首選jQuery來做爲前端javascript庫，可是針對移動端來講，jQuery過重，而如今針對移動端來講，有不少優秀的框架可供使用，jQuery Mobile、YUI、XUI等是不錯的框架，可是我的比較傾向於zepto。不過zepto預約義的一些事件，好比觸屏滑動的swipe事件，在ios上完美支持，可是在android上，有些瀏覽器確實不支持的，這時候就須要尋求與一些第三方的javascript插件庫，好在如今網上有不少優秀的第三方javascript插件庫可供使用，因此各位按需索取吧。

 二、  減小HTTP請求次數：

一個頁面的初始加載使用HTTP請求來操做，沒有任何問題，可是頁面中好比翻頁、篩選之類的操做，若是再使用完整的HTTP請求來處理的話，會加大網絡傳輸的數據量，由於移動端有一個特殊的限制，就是用戶的網絡流量是有限的，超過以後會要交錢的。這時候針對這些頁面內部的部分操做，可使用Ajax異步請求來完成，針對短時間內不會變化的一些數據，可使用服務器端緩存、前端緩存等機制來保存這些數據，這樣能夠減小用戶必定的數據請求量。

 三、  壓縮Javascript和CSS：

把頁面中使用的Javascript代碼和CSS代碼進行壓縮以後會有效地減小頁面大小。

在線的Javascript代碼壓縮工具和在線CSS代碼壓縮工具備不少，而我在開發中會使用下面這兩個：

Javascript壓縮：http://www.jscompress.com/

CSS壓縮：http://www.csscompressor.com/

 四、  使用CDN來管理頁面資源：

CDN的全稱是Content Delivery Network，即內容分發網絡。其基本思想是儘量避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。

咱們能夠把一個頁面上使用的外鏈的Javascript文件、CSS文件、固定的ICON圖標和圖片放在CDN上，這樣在訪問網頁的時候可使用戶可就近取得這些資源，解決網絡擁擠的情況，提升用戶訪問網頁的相應速度。

 五、  列表圖片實現「懶」加載：

移動終端設備由於屏幕大小有限，沒有必要將全屏中的圖片一次性加載進來，在網頁加載的時候，咱們能夠選擇只加載一個可視屏幕中的圖片，當用戶進行滑動頁面的時候，再加載後續剩下的圖片。

這個方案其實就是如今你們都說的圖片延遲加載技術，只是咱們同事在開發的過程當中戲稱爲圖片的「懶」加載，其實說究竟是按需加載。好比你用淘寶搜索產品，你的移動設備一屏其實只能顯示5張圖片，那在頁面初始加載的時候只加載5張圖片，用戶滑動頁面的時候再加載5張圖片，依此類推，這樣用戶滑到哪裏就顯示到哪裏。

目前網上有一些優秀的延遲加載插件，不過我在具體開發過程當中沒有使用第三方插件，而是本身開發的一個插件來實現這種圖片的「懶」加載，後續我單獨介紹我開發的這個插件。

 六、  圖片顯示的優化處理：

首先先說爲何響應式Web設計的時候咱們要對圖片的顯示進行優化處理呢？好比說如今有一張圖片，若是你用低分辨率的圖片，在低分辨率上顯示沒有問題，可是在高分辨率機器上圖片就會模糊不清，影響用戶視覺體驗。可是若是你一開始選用一張高分辨率的圖片，這樣雖然能夠兼顧全部機器上的視覺體驗，可是針對低端機器來講是很不公平的，由於這樣會白白浪費用戶的網絡數據流量。

那咱們應該如何處理呢？解決方法就是根據用戶設備的分辨率來加載不一樣分辨率下的不一樣圖片，這樣既能給不一樣終端的用戶一個很好的視覺體驗，又不會白白浪費用戶的網絡數據流量。

 ①     針對分辨率、屏幕大小來優化圖片的顯示，這裏介紹兩種方法：

第一種，將頁面<image>標籤的src屬性中使用適用於低分辨率的圖片地址，而將其餘中、高分辨率的圖片地址使用HTML5的data-自定義屬性來隱藏；而後經過Javascript來獲取瀏覽器窗口的大小決定加載哪一張圖片，用Javascript把<image>標籤的src屬性替換成所須要的data-自定義屬性中的圖片。

第二種：將加載的圖片地址使用CSS樣式來定義，而後經過Media Queries媒體查詢機制來決定加載哪一張圖片。

②     針對Retina屏幕作專門的圖片優化，一樣介紹兩種方法：

第一種，將頁面<image>標籤的src屬性中使用普通圖片的地址，而將Retina屏幕使用的圖片地址使用HTML5的data-自定義屬性來隱藏；而後經過Javascript來判斷Ratio大小決定是否加載Retina圖片，如需加載使用Javascript把<image>標籤的src屬性替換成所須要的data-自定義屬性中的Retina圖片。

第二種：將加載的圖片地址使用CSS樣式來定義，而後經過Media Queries媒體查詢機制來決定加載Retina圖片，判斷Retina屏幕的媒體查詢機制代碼以下：

@media only screen and (-webkit-device-pixel-ratio: 2) {

   // 設置Retina顯示圖片

}

 七、  使用對SEO友好的標籤：

爲了讓咱們的網頁可以讓搜索引擎更好的收錄，咱們須要在咱們的頁面中儘量低使用對SEO友好的標籤，好比<h1>、<strong>、…等，關於頁面標籤的SEO友好化改造，後期我會專門發文介紹。

     終於完成了響應式Web設計這一個系列的四篇文章，有朋友說我應該把東西寫在一片博文裏，不必分開寫，大有追連續劇的感受，其實這個先說抱歉，可是容許我說一聲，我平時的工做很繁瑣，又不想由於這些事情來影響本身生活的樂趣，因此我只能一點一點的寫。也許還有人說我這四篇博文中水貨不少，那沒有辦法，由於關於響應式Web設計我不是原創者，我充其量算一個總結着，因此一些理論的東西我必須得參考別人的，我不寄但願於別來從我文章裏面能學到多少，其實寫這些技術文章，主要的是讓本身對一些知識點作一個很好的總結，既然總結了，就想分享出來，也許質量很很差，可是我用心了，各位，按需索取吧。同時，我仍是比較期待我我的的後續其餘方面的總結和分享。