緒論A中介紹了性能黃金法則，法則揭示了只有10%20%的時間花費在接受HTML文檔上，剩下的80%90%都花費在所有組件的HTTP請求上（CSS，JS，圖片，F(xiàn)lash等）。因此改善響應時間，最簡單的途徑就是減少組件的數(shù)量，并由此減少HTTP請求的數(shù)量。
從頁面移除組件勢必會引起產(chǎn)品和開發(fā)的矛盾，為了既滿足產(chǎn)品需求，又使開發(fā)者提高網(wǎng)站的訪問效率，本章提供了如下技術(shù)：
- 圖片地圖
- CSS Sprites
- 內(nèi)聯(lián)圖片和腳本
- 樣式表的合并
圖片地圖（Image Map）
超鏈接一般帶有一些文本，比如<a>標簽那樣，并被關(guān)聯(lián)到目標URL上，一種更為美觀的做法是，將超鏈接關(guān)聯(lián)到圖片上，使用圖片地圖方式可以減少HTTP請求，而且無需改變頁面外觀。
圖片地圖允許你在一個圖片上關(guān)聯(lián)多個URL，目標URL取決于用戶點擊了圖片上的哪個位置。
書上給了一個例子，我截了個圖：
CSS Sprites
CSS Sprites同樣可以合并圖片，但是更為靈活。CSS Sprites就是將多個圖片合并到一張單獨的圖片中。
看完了突然想起了QQ、微信的表情，還有富文本編輯器是不是也這么做的呢？
任何支持背景圖片的HTML元素都可以使用CSS Sprites，比如div，span。
使用它們的background-position屬性將HTML元素放到期望的位置上。
例如這樣：
background-position屬性指定了CSS Sprites的偏移量。
圖片地圖和CSS Sprites看起來非常類似，但是圖片地圖中的圖片必須是連續(xù)的，CSS Sprites則沒有這個限制。
它們都有一個優(yōu)點就是通過合并圖片減少HTTP請求，CSS Sprites還降低了下載量。
實際上，合并后的圖片比分離的圖片的總和要小，因為它降低了圖片的開銷（顏色表，格式信息等等）
所以，當頁面中為背景，按鈕，導航欄，鏈接等提供大量圖片時，可以優(yōu)先考慮CSS Sprites。
內(nèi)聯(lián)圖片（Inline Image）
通過data：URL模式可以在Web頁面中包含圖片，而且無需任何額外的HTTP請求。
要注意IE7以下不支持這個屬性，所以無法應用于IE7以下的IE瀏覽器。
data：URL模式的官方描述是，“允許將小塊數(shù)據(jù)內(nèi)聯(lián)為‘立即數(shù)’”，數(shù)據(jù)就在URL中。
語法是這樣的，以<img>標簽為例。[;base64]為可選數(shù)據(jù)。
<img src="data:圖片路徑[; base64], 數(shù)據(jù)內(nèi)容">
data:一般都用于內(nèi)聯(lián)圖片，但它可以用在任何需要制定URL的地方，包括<scripts>和<a>標簽。
當然，內(nèi)聯(lián)圖片也是受限制的，IE7及以下版本不支持，而且在數(shù)據(jù)大小上也有限制，一般不能超過100kb。base64編碼會增加圖片的大小，因此整體下載量會增加。
合并腳本和樣式表
盡量把多個js文件和css文件合并起來，因為每個文件都需要使用http請求，而為了加快響應速度，必須減少HTTP數(shù)量，這是核心思想。
