構建高性能網站----減少頁面中的http請求數
對於互聯網產品，近幾年一直在聽周圍的產品和技術說着用戶體驗，尤其是Steve jobs say good bye了以後，但是什麼是真正的用戶體驗。漂亮，fashion，吸引人當然是非常重要，但這些都是基出美工人員的設計。
那麼，除了美工製作誘人的圖片以外，還有什麼方法來提升用戶體驗呢？
當用戶訪問你的網站時，我們總是想盡量減少用戶等待時間，如果不是這樣，那麼Ajax技術的出現我想也沒有什麼必要了。
當我們訪問一個網站或是一個網頁時，首先要做的就是從瀏覽器對服務器進行一次請求，然後通過服務器的響應把從服務器上請求到的組件呈現在瀏覽器上。很顯然，在這一過程中，我們希望時間越短越好，這樣才能更快的將頁面上的內容或是組件儘快的呈現給用戶。
說到底就是減少網頁對服務器的http請求次數，請求次數少了，時間自然就少了，但是對於互聯網來說，減少網頁中組件數量又不太可能，尤其是對於那些複雜又看上去絢麗的網頁來說。正因爲這樣，所以我們在開發網頁的時候，就需要前端設計人員進行一些技巧上的處理。
一．圖片地圖
圖片地圖允許你把一個圖片分割成多個部分，然後在每個分割的部分上添加自己的事件。
如你正在使用導航欄或是圖片導航這類的應用，使用這種方法，服務器只產生一次http請求，避免了多個圖片產生多個http請求的情況，並且實現起來也比較簡單。
例子如下：
我有一幅忍者神龜的圖片，我在這四個小龜腦袋上針對不同的忍者神龜添加四個alert
<html>
<head>
<title>構建高性能網站-減少頁面中的http請求數-圖片地圖</title>
</head>
<body>
<img src="TMNT.jpg" border="0" usemap="#TMNTmap" alt="TMNT" />
<map name="TMNTmap" id="TMNTmap">
<!-- coords 圓心加半徑 rect 左上角的座標到右下角的座標-->
<area shape="circle" coords="273,373,50" href ="javascript:alert('這是第一隻龜');" alt="First"/>
<area shape="circle" coords="442,375,50" href ="javascript:alert('這是第二隻龜');" alt="Second"/>
<area shape="circle" coords="563,382,50" href ="javascript:alert('這是第三隻龜');" alt="Third"/>
<area shape="rect" coords="688,344,780,415" href ="javascript:alert('這是第四隻龜');" alt="Fourth"/>
</map>
</body>
</html>
這裏主要使用的就是html中的<map>和<area>標籤。
一．CSS Sprites
CSS Sprites比圖片地圖更加靈活，它可以在網頁中的任何一個位置顯示某一張圖
片的某一個部分。
還用我的忍者神龜爲例，在圖片地圖中我們在每一個龜腦袋上都添加了js事件。
現在我們把這四個小王八從上到下的順序排列
效果如圖:
<html>
<head>
<title>構建高性能網站-減少頁面中的http請求數-CSS Sprites</title>
<style>
#First{
background-image:url(TMNT.jpg);
background-position:-230px -335px;
width:90px;
height:70px;
}
#Second{
background-image:url(TMNT.jpg);
background-position:-400px -341px;
width:90px;
height:70px;
}
#Third{
background-image:url(TMNT.jpg);
background-position:-518px -340px;
width:90px;
height:70px;
}
#Fourth{
background-image:url(TMNT.jpg);
background-position:-686px -342px;
width:90px;
height:70px;
}
</style>
</head>
<body>
<div id="First"></div>
<div id="Second"></div>
<div id="Third"></div>
<div id="Fourth"></div>
</body>
</html>區別：
圖片地圖是把一張圖片分割成不同的區域，在不同的區域上可以增加單獨的事件。
Css sprites是可以把一張圖片將某一部分裁剪下來顯示到不同的元素上去，甚至可以讓其顯示
成一幅新圖。