相關(guān)概念
1声畏、為什么要減少http請(qǐng)求
性能黃金法則 組件花費(fèi)時(shí)間占八九成
2驰徊、減少http請(qǐng)求的方式
減少組件的數(shù)量,并由此減少http請(qǐng)求的數(shù)量
http連接產(chǎn)生的開銷
域名解析-TCP連接-發(fā)送請(qǐng)求-等待-下載資源-解析時(shí)間
疑問?
DNS緩存
Keep-Alive
查找DNS緩存也需要時(shí)間少漆,多個(gè)緩存就要查找多次尸疆,有可能緩存被清除
HTTP1.1協(xié)議規(guī)定請(qǐng)求只能串行發(fā)送
減少http請(qǐng)求的方式
1椿猎、圖片地圖
圖片地圖允許在一個(gè)圖片上關(guān)聯(lián)多個(gè)URL,目標(biāo)URL的選擇取決于用戶點(diǎn)擊了圖片的哪個(gè)位置寿弱。map標(biāo)簽
2犯眠、CSS Sprites
CSS Sprites中文翻譯叫CSS精靈,通過使用合并圖片症革,通過制定的css的background-image和backage-postion來顯示元素
性能影響
圖片地圖和CSS精靈的響應(yīng)時(shí)間基本上相同阔逼,但是比使用各自獨(dú)立圖片的方式要快50%
3、合并腳本和樣式表適
使用外部的js和css文件引入的方式地沮,因?yàn)檫@要比直接寫在頁(yè)面中性能要更好一點(diǎn)
獨(dú)立的一個(gè)js比用多個(gè)js文件組成的頁(yè)面載入要快38%
把多個(gè)腳本合并為一個(gè)嗜浮,多個(gè)樣式表合并為一個(gè)。
4摩疑、圖片使用Base64編碼減少頁(yè)面請(qǐng)求數(shù)
采用Base64的編碼方式將圖片直接嵌入到頁(yè)