這篇文章主要說說在進(jìn)行響應(yīng)式Web設(shè)計(jì)的過程中，涉及到頁(yè)面的一些需要進(jìn)行優(yōu)化的地方：

1、? 輕量級(jí)的Javascript庫(kù)：

針對(duì)PC端網(wǎng)頁(yè)當(dāng)然會(huì)首選jQuery來(lái)作為前端javascript庫(kù)，但是針對(duì)移動(dòng)端來(lái)說，jQuery太重，而現(xiàn)在針對(duì)移動(dòng)端來(lái)說，有很多優(yōu)秀的框架可供使用，jQuery Mobile、YUI、XUI等是不錯(cuò)的框架，但是個(gè)人比較傾向于zepto。不過zepto預(yù)定義的一些事件，比如觸屏滑動(dòng)的swipe事件，在ios上完美支持，但是在android上，有些瀏覽器確實(shí)不支持的，這時(shí)候就需要尋求與一些第三方的javascript插件庫(kù)，好在現(xiàn)在網(wǎng)上有很多優(yōu)秀的第三方j(luò)avascript插件庫(kù)可供使用，所以各位按需索取吧。

?

2、? 減少HTTP請(qǐng)求次數(shù)：

一個(gè)頁(yè)面的初始加載使用HTTP請(qǐng)求來(lái)操作，沒有任何問題，但是頁(yè)面中比如翻頁(yè)、篩選之類的操作，如果再使用完整的HTTP請(qǐng)求來(lái)處理的話，會(huì)加大網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)量，因?yàn)橐苿?dòng)端有一個(gè)特殊的限制，就是用戶的網(wǎng)絡(luò)流量是有限的，超過之后會(huì)要交錢的。這時(shí)候針對(duì)這些頁(yè)面內(nèi)部的部分操作，可以使用Ajax異步請(qǐng)求來(lái)完成，針對(duì)短期內(nèi)不會(huì)變化的一些數(shù)據(jù)，可以使用服務(wù)器端緩存、前端緩存等機(jī)制來(lái)保存這些數(shù)據(jù)，這樣可以減少用戶一定的數(shù)據(jù)請(qǐng)求量。

?

3、? 壓縮Javascript和CSS：

把頁(yè)面中使用的Javascript代碼和CSS代碼進(jìn)行壓縮之后會(huì)有效地減少頁(yè)面大小。

在線的Javascript代碼壓縮工具和在線CSS代碼壓縮工具有很多，而我在開發(fā)中會(huì)使用下面這兩個(gè)：

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

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

?

4、? 使用CDN來(lái)管理頁(yè)面資源：

CDN的全稱是Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)。其基本思想是盡可能避開互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié)，使內(nèi)容傳輸?shù)母臁⒏€(wěn)定。

我們可以把一個(gè)頁(yè)面上使用的外鏈的Javascript文件、CSS文件、固定的ICON圖標(biāo)和圖片放在CDN上，這樣在訪問網(wǎng)頁(yè)的時(shí)候可以使用戶可就近取得這些資源，解決網(wǎng)絡(luò)擁擠的狀況，提高用戶訪問網(wǎng)頁(yè)的相應(yīng)速度。

?

5、? 列表圖片實(shí)現(xiàn)“懶”加載：

移動(dòng)終端設(shè)備因?yàn)槠聊淮笮∮邢?#xff0c;沒有必要將全屏中的圖片一次性加載進(jìn)來(lái)，在網(wǎng)頁(yè)加載的時(shí)候，我們可以選擇只加載一個(gè)可視屏幕中的圖片，當(dāng)用戶進(jìn)行滑動(dòng)頁(yè)面的時(shí)候，再加載后續(xù)剩下的圖片。

這個(gè)方案其實(shí)就是現(xiàn)在大家都說的圖片延遲加載技術(shù)，只是我們同事在開發(fā)的過程中戲稱為圖片的“懶”加載，其實(shí)說到底是按需加載。比如你用淘寶搜索產(chǎn)品，你的移動(dòng)設(shè)備一屏其實(shí)只能顯示5張圖片，那在頁(yè)面初始加載的時(shí)候只加載5張圖片，用戶滑動(dòng)頁(yè)面的時(shí)候再加載5張圖片，依此類推，這樣用戶滑到哪里就顯示到哪里。

目前網(wǎng)上有一些優(yōu)秀的延遲加載插件，不過我在具體開發(fā)過程中沒有使用第三方插件，而是自己開發(fā)的一個(gè)插件來(lái)實(shí)現(xiàn)這種圖片的“懶”加載，后續(xù)我單獨(dú)介紹我開發(fā)的這個(gè)插件。

?

6、? 圖片顯示的優(yōu)化處理：

首先先說為什么響應(yīng)式Web設(shè)計(jì)的時(shí)候我們要對(duì)圖片的顯示進(jìn)行優(yōu)化處理呢？比如說現(xiàn)在有一張圖片，如果你用低分辨率的圖片，在低分辨率上顯示沒有問題，但是在高分辨率機(jī)器上圖片就會(huì)模糊不清，影響用戶視覺體驗(yàn)。但是如果你一開始選用一張高分辨率的圖片，這樣雖然可以兼顧所有機(jī)器上的視覺體驗(yàn)，但是針對(duì)低端機(jī)器來(lái)說是很不公平的，因?yàn)檫@樣會(huì)白白浪費(fèi)用戶的網(wǎng)絡(luò)數(shù)據(jù)流量。

那我們應(yīng)該如何處理呢？解決方法就是根據(jù)用戶設(shè)備的分辨率來(lái)加載不同分辨率下的不同圖片，這樣既能給不同終端的用戶一個(gè)很好的視覺體驗(yàn)，又不會(huì)白白浪費(fèi)用戶的網(wǎng)絡(luò)數(shù)據(jù)流量。

?

①???? 針對(duì)分辨率、屏幕大小來(lái)優(yōu)化圖片的顯示，這里介紹兩種方法：

第一種，將頁(yè)面<image>標(biāo)簽的src屬性中使用適用于低分辨率的圖片地址，而將其他中、高分辨率的圖片地址使用HTML5的data-自定義屬性來(lái)隱藏；然后通過Javascript來(lái)獲取瀏覽器窗口的大小決定加載哪一張圖片，用Javascript把<image>標(biāo)簽的src屬性替換成所需要的data-自定義屬性中的圖片。

第二種：將加載的圖片地址使用CSS樣式來(lái)定義，然后通過Media Queries媒體查詢機(jī)制來(lái)決定加載哪一張圖片。

②???? 針對(duì)Retina屏幕做專門的圖片優(yōu)化，同樣介紹兩種方法：

第一種，將頁(yè)面<image>標(biāo)簽的src屬性中使用普通圖片的地址，而將Retina屏幕使用的圖片地址使用HTML5的data-自定義屬性來(lái)隱藏；然后通過Javascript來(lái)判斷Ratio大小決定是否加載Retina圖片，如需加載使用Javascript把<image>標(biāo)簽的src屬性替換成所需要的data-自定義屬性中的Retina圖片。

第二種：將加載的圖片地址使用CSS樣式來(lái)定義，然后通過Media Queries媒體查詢機(jī)制來(lái)決定加載Retina圖片，判斷Retina屏幕的媒體查詢機(jī)制代碼如下：

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

?? // 設(shè)置Retina顯示圖片

}

?

7、? 使用對(duì)SEO友好的標(biāo)簽：

為了讓我們的網(wǎng)頁(yè)能夠讓搜索引擎更好的收錄，我們需要在我們的頁(yè)面中盡可能低使用對(duì)SEO友好的標(biāo)簽，比如<h1>、<strong>、…等，關(guān)于頁(yè)面標(biāo)簽的SEO友好化改造，后期我會(huì)專門發(fā)文介紹。

?

終于完成了響應(yīng)式Web設(shè)計(jì)這一個(gè)系列的四篇文章，有朋友說我應(yīng)該把東西寫在一片博文里，沒必要分開寫，大有追連續(xù)劇的感覺，其實(shí)這個(gè)先說抱歉，但是允許我說一聲，我平時(shí)的工作很繁瑣，又不想因?yàn)檫@些事情來(lái)影響自己生活的樂趣，所以我只能一點(diǎn)一點(diǎn)的寫。也許還有人說我這四篇博文中水貨很多，那沒有辦法，因?yàn)殛P(guān)于響應(yīng)式Web設(shè)計(jì)我不是原創(chuàng)者，我充其量算一個(gè)總結(jié)著，所以一些理論的東西我必須得參考別人的，我不寄希望于別來(lái)從我文章里面能學(xué)到多少，其實(shí)寫這些技術(shù)文章，主要的是讓自己對(duì)一些知識(shí)點(diǎn)做一個(gè)很好的總結(jié)，既然總結(jié)了，就想分享出來(lái)，也許質(zhì)量很不好，但是我用心了，各位，按需索取吧。同時(shí)，我還是比較期待我個(gè)人的后續(xù)其他方面的總結(jié)和分享。

總結(jié)

以上是生活随笔為你收集整理的响应式Web设计（四）：响应式Web设计的优化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。