為什么減少HTTP請(qǐng)求
image.png
HTTP連接產(chǎn)生的開(kāi)銷(xiāo)
域名解析-TCP連接-發(fā)送請(qǐng)求-等待-下載資源-解析時(shí)間
疑問(wèn)
1.DNS緩存
查找DNS緩存也需要時(shí)間多個(gè)緩存就要多次有可能緩存會(huì)被清除
2.Keep-Alive
HTTP1.1協(xié)議規(guī)定請(qǐng)求只能串行發(fā)送猜年，也就是說(shuō)一百個(gè)請(qǐng)求必須依次逐個(gè)發(fā)送峦筒，前面的一個(gè)請(qǐng)求完成才能開(kāi)始下個(gè)請(qǐng)求
減少HTTP請(qǐng)求的方式
圖片地圖
- 圖片地圖允許你在一個(gè)圖片上關(guān)聯(lián)多個(gè)URL捆姜。目標(biāo)URL的選擇取決于用戶單擊了圖片的哪個(gè)位置
- 我們可以通過(guò)5個(gè)分開(kāi)的圖片，然后每個(gè)圖片對(duì)應(yīng)一個(gè)超鏈接產(chǎn)生了5個(gè)HTTP請(qǐng)求，我們的目標(biāo)是要減少HTTP請(qǐng)求
- 將五個(gè)圖片合并為一張圖片，然后以位置定位超鏈接
- 把HTTP請(qǐng)求減少為1個(gè)羹奉，可以保證設(shè)計(jì)的完整性和功能的齊全性
- 使用<map><area></area></map>標(biāo)簽
CSS Sprites
CSS精靈
background-image和background-position
合并腳本和樣式表
外部js和css引用
多個(gè)合并
圖片使用Base64編碼減少頁(yè)面請(qǐng)求數(shù)
采用Base64編碼方式將圖片直接嵌入到網(wǎng)頁(yè)中，而不是從外部載入
<img src="data:image/gif;base64,/9j/4AAQSkZJ......">
css background-image
