本文是Web前端性能優化系列文章中的第一篇，主要講述如何減少減少Http請求。完整教程可查看：Web前端性能優化
性能黃金法則
隻有10%-20%的最終用戶響應時間花在接收請求的HTML文檔上，剩下的80%-90%時間花在HTML文檔所引用的所有組件(圖片，script，css，flash等等)進行的HTTP請求上。
前言
有關前端性能優化的資料參考於《高性能網站建設》這本書，這一系列的文章可以看作是對這本書的閱讀筆記。
改善響應時間的最簡單途徑就是減少組件的數量，並由此減少HTTP請求的數量。接下來將探討幾個技術實現。
1. 圖片地圖
圖片地圖允許你在一個圖片上關聯多個URL。目標URL的選擇取決於用戶單擊瞭圖片上的哪個位置。
以導航欄為例，當點擊圖標的時候將打開一個新的窗口。要實現的效果如下圖：
我們可以通過使用五個分開的圖片，然後讓每個圖片對應一個超鏈接。然而這樣無疑就產生瞭5個Http請求，我們的目標是要減少HTTP請求，這裡圖片地圖就可以派上用場瞭，通過將五個圖片合並為一張圖片，然後以位置信息定位超鏈接，這樣就把HTTP請求減少為一個瞭，又可以保證設計的完整性和功能的齊全性，實現代碼如下：
- <img usemap=”#map1″ border=0 src=””>
- <map name=”map1″>
- <area shape=”rect” coords=”0,0,31,31″ href=”javascript:alert(‘Home’)” title=”Home”>
- <area shape=”rect” coords=”36,0,66,31″ href=”javascript:alert(‘Gifts’)” title=”Gifts”>
- <area shape=”rect” coords=”71,0,101,31″ href=”javascript:alert(‘Cart’)” title=”Cart”>
- <area shape=”rect” coords=”106,0,136,31″ href=”javascript:alert(‘Settings’)” title=”Settings”>
- <area shape=”rect” coords=”141,0,171,31″ href=”javascript:alert(‘Help’)” title=”Help”>
- </map>
2. CSS Sprites
CSS Sprites中文翻譯為CSS精靈，通過使用合並圖片，通過指定css的backgroud-image和backgroud-position來顯示元素。
這裡重點提一下backgroud-position屬性。backgroud-position:x y; x和y可以寫負值也可以寫正值，我們可以想象圖片的左上方為(0,0)，以(0,0)坐標向右是為負數的x軸，以(0,0)坐標向下是為負數的y軸。正值的情況則以圖片左下方為(0,0)，向右是為正數的x軸，向上是為正數的y軸。
來看一張來自豆瓣的翻頁圖片：
可以明顯地看到這裡組合瞭4張圖片，上面兩個按鈕是初始顯示按鈕樣式，當鼠標移到上面的時候就變為下面兩個按鈕樣式，實現代碼如下：
- <html>
- <head>
- <title></title>
- <style type=”text/css”>
- .left{ background-image:url(2.png); background-position:0px 0px; width:18px; height:18px; }
- .right{ background-image:url(2.png); background-position:-18px 0px; width:18px; height:18px; }
- .left:hover{ background-position:0px -18px; }
- .right:hover{ background-position:-18px -18px; }
- </style>
- </head>
- <body>
- <div>
- <div class=”left”></div>
- <div class=”right”></div>
- </div>
- </body>
- </html>
通常情況下，前端切圖得到的是一張張小圖標，要將其合並為一張圖，可以使用專門的工具，例如CSS Sprite Generator，這個工具不僅可以合並圖片，同時還可以生成圖片的css樣式。
與圖片地圖做一個對比：圖片地圖是依賴於html實現，CSS精靈依賴於CSS實現，CSS精靈的實現方式更為靈活。
3. 合並腳本和樣式表
適當地把多個腳本合並為一個腳本，把多個樣式表合並為一個樣式表。