Web優化-減小http的請求數量（前端）

　　使用Image maps替換多張帶有超連接的圖片，使用圖片地圖這種方式能夠減小Http請求。實際使用的時，發現加載image maps圖片的時間卻是很長，客戶端圖片地圖能夠使用Map標籤實現操做。

<img usemap="#map1" border=0 src="/img/1.gif">
<map>
    <area shape="rect" coords="0,031,31" href="home.html" title="Home">
    <area shape="rect" coords="30,0,66,31" href="gift.html" title="gift">
</map>

　　css Sprites也能夠合併圖片，但更爲靈活。css sprites是任何支持背景圖片的Html元素。使用css的background-position屬性，能夠將Html元素放置到背景圖片中指望的位置上。

<div style="background-image:url('a_sprites.gif');background-position:-260px -90px;width:26px;height:24px;">
    
</div>

css sprites定位

　　圖片地圖也能夠用css sprites的方式實現。相對於圖片地圖，它的圖片沒有必要連續的。

　　經過使用data:URL模式能夠在web頁面中包含圖片但無需任何額外的http請求。由於URL是內聯在頁面中的，在跨越不一樣頁面時不會被緩存。不要內聯公司Logo，由於編碼過的Logo會致使頁面變大。這種狀況下，聰明的作法是使用css並將內聯圖片做爲背景。將該css規則放在外部樣式表中，這意味着數據能夠緩存在樣式表內部。

　　合併腳本和樣式表。將這些單獨的文件合併到一個文件中，能夠減小Http請求的數量並縮短最終用戶響應時間。

 

　　摘抄於《高性能網站建設指南》