响应式Web设计（四）：响应式Web设计的优化
這篇文章主要說說在進行響應式Web設計的過程中，涉及到頁面的一些需要進行優化的地方：
1、? 輕量級的Javascript庫：
針對PC端網頁當然會首選jQuery來作為前端javascript庫，但是針對移動端來說，jQuery太重，而現在針對移動端來說，有很多優秀的框架可供使用，jQuery Mobile、YUI、XUI等是不錯的框架，但是個人比較傾向于zepto。不過zepto預定義的一些事件，比如觸屏滑動的swipe事件，在ios上完美支持，但是在android上，有些瀏覽器確實不支持的，這時候就需要尋求與一些第三方的javascript插件庫，好在現在網上有很多優秀的第三方javascript插件庫可供使用，所以各位按需索取吧。
?
2、? 減少HTTP請求次數：
一個頁面的初始加載使用HTTP請求來操作，沒有任何問題，但是頁面中比如翻頁、篩選之類的操作，如果再使用完整的HTTP請求來處理的話，會加大網絡傳輸的數據量，因為移動端有一個特殊的限制，就是用戶的網絡流量是有限的，超過之后會要交錢的。這時候針對這些頁面內部的部分操作，可以使用Ajax異步請求來完成，針對短期內不會變化的一些數據，可以使用服務器端緩存、前端緩存等機制來保存這些數據，這樣可以減少用戶一定的數據請求量。
?
3、? 壓縮Javascript和CSS：
把頁面中使用的Javascript代碼和CSS代碼進行壓縮之后會有效地減少頁面大小。
在線的Javascript代碼壓縮工具和在線CSS代碼壓縮工具有很多，而我在開發中會使用下面這兩個：
Javascript壓縮：http://www.jscompress.com/
CSS壓縮：http://www.csscompressor.com/
?
4、? 使用CDN來管理頁面資源：
CDN的全稱是Content Delivery Network，即內容分發網絡。其基本思想是盡可能避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。
我們可以把一個頁面上使用的外鏈的Javascript文件、CSS文件、固定的ICON圖標和圖片放在CDN上，這樣在訪問網頁的時候可以使用戶可就近取得這些資源，解決網絡擁擠的狀況，提高用戶訪問網頁的相應速度。
?
5、? 列表圖片實現“懶”加載：
移動終端設備因為屏幕大小有限，沒有必要將全屏中的圖片一次性加載進來，在網頁加載的時候，我們可以選擇只加載一個可視屏幕中的圖片，當用戶進行滑動頁面的時候，再加載后續剩下的圖片。
這個方案其實就是現在大家都說的圖片延遲加載技術，只是我們同事在開發的過程中戲稱為圖片的“懶”加載，其實說到底是按需加載。比如你用淘寶搜索產品，你的移動設備一屏其實只能顯示5張圖片，那在頁面初始加載的時候只加載5張圖片，用戶滑動頁面的時候再加載5張圖片，依此類推，這樣用戶滑到哪里就顯示到哪里。
目前網上有一些優秀的延遲加載插件，不過我在具體開發過程中沒有使用第三方插件，而是自己開發的一個插件來實現這種圖片的“懶”加載，后續我單獨介紹我開發的這個插件。
?
6、? 圖片顯示的優化處理：
首先先說為什么響應式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顯示圖片
}
?
7、? 使用對SEO友好的標簽：
為了讓我們的網頁能夠讓搜索引擎更好的收錄，我們需要在我們的頁面中盡可能低使用對SEO友好的標簽，比如<h1>、<strong>、…等，關于頁面標簽的SEO友好化改造，后期我會專門發文介紹。
?
終于完成了響應式Web設計這一個系列的四篇文章，有朋友說我應該把東西寫在一片博文里，沒必要分開寫，大有追連續劇的感覺，其實這個先說抱歉，但是允許我說一聲，我平時的工作很繁瑣，又不想因為這些事情來影響自己生活的樂趣，所以我只能一點一點的寫。也許還有人說我這四篇博文中水貨很多，那沒有辦法，因為關于響應式Web設計我不是原創者，我充其量算一個總結著，所以一些理論的東西我必須得參考別人的，我不寄希望于別來從我文章里面能學到多少，其實寫這些技術文章，主要的是讓自己對一些知識點做一個很好的總結，既然總結了，就想分享出來，也許質量很不好，但是我用心了，各位，按需索取吧。同時，我還是比較期待我個人的后續其他方面的總結和分享。
總結
以上是生活随笔為你收集整理的响应式Web设计（四）：响应式Web设计的优化的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 10个顶尖响应式HTML5网页
- 下一篇： 2017年html5行业报告,云适配发布