《Higb Performance Web Sites》(中文名：“高性能網站建設指南”)這本書對于前端工程師來說，絕對值得一讀。本人有幸從公司借閱了，但不幸的是感覺翻譯有點怪怪的。尤其是在翻譯CSS Sprites的關鍵部分，讓人不知所云。幸虧原理比較簡單，所以沒有造成障礙。^_^?
本人看書有做筆記、寫示例、發牢騷的習慣，所以有了下文。個人備忘也罷，初學者入門也罷，反正賴在這里。所以，拍磚也罷，口水也罷，我都忍著，呵呵。。。

當一個頁面的圖片在沒有使用任何方案的情況下，五個圖片超鏈接就只能使用五個圖標按鈕。
代碼如下：

<div?style="border:?2px?ridge?rgb(51,?51,?51);?rgb(244,?245,?235);?width:?200px;?padding-top:?4px;">
<center>?????????<a?href="javascript:alert('Home')"?title="Home"><img?src="http_request_img/home.gif"?border="0"></a>
<a?href="javascript:alert('Gift')"?title="Gift"><img?src="http_request_img/gift.gif"?border="0"></a>
<a?href="javascript:alert('Cart')"?title="Cart"><img?src="http_request_img/cart.gif"?border="0"></a>
<a?href="javascript:alert('Settings')"?title="Settings"><img?src="http_request_img/settings.gif"?border="0"></a>
<a?href="javascript:alert('Help')"?title="Help"><img?src="http_request_img/help.gif"?border="0"></a>
</center>
</div>

效果如下：?

????

注意：這五個按鈕分別使用了五張圖片

那么，五張圖片就意味著你的該頁面又多了五個HTTP請求，它將大大降低頁面的呈現效率。增加的HTTP請求是導致頁面性能下降的最大劊子手，所以我們應該盡量減少HTTP請求，而圖片是增加HTTP請求的最大可能者，搞定它，事不宜遲！呵呵^_^

下面列出了三種解決方案：

方案一：圖片地圖(圖像熱點)：它將用戶的點擊映射到一個操作，而無需向后端Web服務器發送任何請求。

代碼如下：

<div?class="panel_div"?style="border:2px?ridge?#333333;245,?235);width:180px;padding:4px?0px?0px?2px;">?????<img?usemap="#mymap"?src="http_request_img/imagemap.gif"?border="0"?/>?????<map?name="mymap">?<!--?img使用的map?-->?????????<area?shape="rect"?coords="0,0,31,31"?href="javascript:alert('Home');"/>?????????<area?shape="rect"?coords="36,0,66,31"?href="javascript:alert('Gifts');"/>?????????<area?shape="rect"?coords="71,0,101,31"?href="javascript:alert('Cart')"/>?????????<area?shape="rect"?coords="106,0,136,31"?href="javascript:alert('Set')"/>?????????<area?shape="rect"?coords="141,0,171,31"?href="javascript:alert('Help')"/>?????</map>
</div>

效果如下：?

注意：這五個按鈕其實是在一張圖片中

方案二：CSS Sprites：使用這種方式也可以將五張圖片合并為一張圖片，并且更為靈活。

代碼如下：

<style>
/*?對div中所有span的樣式設置?*/
#navbar?span?{
??/*?定義<span>標簽將截取的圖片寬度和高度?*/
??width:30px;?height:31px;
??/*?添加包含了所有圖標的圖片?*/
??background-image:url(http_request_img/imagemap.gif);
??display:inline;?float:left;
}
?/*?background-position：指定圖標在CSS?Sprites圖片的偏移量
????margin-left?和?margin-right?則用來定位圖標位置
?*/
.home?????{?background-position:0?0;?margin-left:2px;}
.gifts????{?background-position:-35px?0;?margin-left:50px;}
.cart?????{?background-position:-70px?0;?margin-left:120px;}
</style>
<div?id="navbar"?style="border:?2px?ridge?rgb(51,?51,?51);?padding:?4px?0pt;??width:?300px;?height:?32px;">
??<a?href="javascript:alert('Home')"?title="Home">
?????<span?class="home"></span></a>?<!--?注意：該span標簽用來加載圖片?-->
??<a?href="javascript:alert('Gifts')"?title="Gifts">
????<span?class="gifts"></span></a>?<!--?注意：該span標簽用來加載圖片?-->
??<a?href="javascript:alert('Cart')"?title="Cart">
????<span?class="cart"></span></a>??<!--?注意：該span標簽用來加載圖片?-->
</div>

效果如下：

注意：在這個“CSS Sprites”中用到的圖片就是“圖片地圖”中的同一張圖片。(并特地只顯示其中的三個圖標)

CSS Sprites的原理：只是定位到圖片其中的一塊區域，并顯示在某個位置而已。

CSS Sprites的優點：通過只使用一個圖片減少了HTTP請求，并且比“圖片地圖”更靈活。

很多人會誤認為：合并的圖片要比分離的圖片的總和要大，因為合并的圖片中包含有附加的空白區域。
實際上，合并的圖片要比分離的圖片的總和要小，這是因為它降低了圖片自身的開銷(顏色表、格式信息，等等)。

方案三：內聯圖片：通過使用data: URL模式在Web頁面中包含圖片，且無需任何額外的HTTP請求。(IE目前不支持)

????? 1、內聯圖片的原理：允許將小塊數據內聯為‘立即數(immediate data)’，數據就包含在其URL自身之中。?

????? 2、內聯圖片的格式：data:[<mediatype>][;base64]，<data>

舉例：一個內聯圖片可以定義為
<img src="data:image/gif;base64，asdfghjklaasdvdddddddaaaaaddddd++ddd======ssswdvdv33" >

其中“asdfghjklaasdvdddddddaaaaaddddd++ddd======ssswdvdv33”就是該圖片的數據。

data: URL模式-> 基本用于內聯圖片，可以用在任何需要指定URL的地方，如：script和a標簽中。

????? 3、內聯圖片的缺陷：

??????????? a> 不受IE的支持(IE7也如此)；

??????????? b> 保存數據的大小上受限制(Firefox 1.5支持高達100KB的數據)；

??????????? c> Base64編碼會增加其圖片的大小；

??????????? d> 在跨越不同頁面時不會被緩存

????????????? (可以將內聯圖片作為背景圖片保存在外部CSS樣式表中來解決此問題，但會增加一個HTTP請求以換得數據被緩存的結果。)；

在PHP技術中，使用函數file_get_contents從磁盤讀取圖片并插入到頁面中來創建內聯圖片：

在其HTML中，使用style標簽的href屬性指定外部樣式表文件時，直接指定到了一個PHP模版的.php文件(注意:不是.css文件)，該PHP模版使用file_get_contents函數生成其樣式表：?

.home{ background-image:url(data:image/gif;base64,<?php echo base64_encode(file_get_contents("../img/home.gif")) ?>);}

其最終數據將是base64編碼格式的圖片data數據。

當然，使用ASP.NET技術生成其base64編碼格式的圖片data數據也不會很難。大家可以自行實驗。

本人推薦：根據具體情況，使用方案一：圖片地圖(圖像熱點)或方案二：CSS Sprites。

附加知識：URL中的相關協議：http:、data:、file:、ftp:、mailto:、smtp:、pop:、dns:、whois:、finger:、daytime:、news:、urn: 等。這其中有一些是官方注冊的，還有一些是由于廣泛使用而被接受。

http://www.cnblogs.com/xugang/archive/2009/10/26/1589934.html

總結

以上是生活随笔為你收集整理的减少图片HTTP 请求的方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。