在進(jìn)行性能優(yōu)化時(shí)，關(guān)鍵是剖析當(dāng)前的性能，找到在哪里能夠獲得最大的改進(jìn)。
性能黃金法則：
只有10%20%的最終用戶響應(yīng)時(shí)間花在了下載HTML文檔上，其余的80%90%時(shí)間花在了下載頁面中的所有組件上。
1. 圖片地圖
現(xiàn)在很多網(wǎng)站都是圖片形式的導(dǎo)航，點(diǎn)擊圖片跳轉(zhuǎn)到對(duì)應(yīng)的鏈接。如果導(dǎo)航項(xiàng)目很多的話，圖片的數(shù)量就會(huì)很多，每需要加載一張圖片就會(huì)多一個(gè)HTTP請(qǐng)求。優(yōu)化的方式之一就是使用圖片地圖
<img src="planets.gif" alt="Planets" usemap ="#planetmap" />
<map id="planetmap">
<area shape ="rect" coords ="0,0,110,260" href ="sun.htm" alt="Sun" />
<area shape ="circle" coords ="129,161,10" href ="mercur.htm" alt="Mercury" />
<area shape ="circle" coords ="180,139,14" href ="venus.htm" alt="Venus" />
</map>
2. CSS Sprites
CSS Sprites 和比圖片地圖方案好。
3. 內(nèi)聯(lián)圖片
適用于圖片小于2KB，頁面引用圖片不多的情況。將圖片轉(zhuǎn)換為base64編碼字符串inline到CSS或頁面中，減少http的請(qǐng)求次數(shù)。
<img src="data:image/png;base64,iVAGRw0KGDCFGNSUhEUgACBBQAVGADCAIATYJ7ljmRGGAAGElEVQQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPACCCTElFTEVBQmGA" />
image/png - 數(shù)據(jù)類型名稱
base64 - 數(shù)據(jù)的編碼方法
iUANR.... - 編碼后的數(shù)據(jù)
: , ; - data URI scheme 指定的分隔符號(hào)
