圖片,css,script,flash,等等這些都會(huì)增加http請(qǐng)求數(shù),減少這些元素的數(shù)量能減少響應(yīng)時(shí)間。CSS Sprites技術(shù)能減少圖片的請(qǐng)求數(shù),把零散的小圖片放到一起,運(yùn)用background-position來改變背景圖片的位置,前提是html元素事先定義好寬高,其實(shí)就像一個(gè)遮罩,移動(dòng)背景就會(huì)看到不同的景象。
1、內(nèi)嵌圖像
用data:URL scheme的方式把圖片內(nèi)容代碼直接嵌入html代碼中,這樣會(huì)增大html代碼的體積,改進(jìn)的方式是把內(nèi)嵌圖片嵌入到css中(css被緩存),這樣就會(huì)更好的減少http請(qǐng)求數(shù)而且不增大html的體積。
2、合并文件
合并文件就是把很多JS文件合并成1個(gè)文件,很多CSS文件合并成1個(gè)文件,這種方法應(yīng)該很多人用到過,這里只推薦1個(gè)合并的工具:yuiCompressor 這個(gè)工具yahoo提供的。
3、合并圖片
這是利用css sprite,通過控制背景圖片的位置來顯示不同的圖片。
4、把JS、CSS合并到1個(gè)文件
上面第1種方法說的只是把幾個(gè)JS文件合并成1個(gè)JS文件,幾個(gè)CSS文件合并成1個(gè)CSS文件,那如何把CSS和JS都合并到1個(gè)文件中。
合并JS文件和CSS文件很多人都知道,也用過,目的是為了減少請(qǐng)求數(shù)。但有時(shí)候我們覺的把JS合并到1個(gè)文件,CSS又合并到另外1個(gè)文件也是浪費(fèi),我們?nèi)绾文馨袰SS和JS一起合并進(jìn)1個(gè)文件了?
這里需要使用1個(gè)常見的注釋符<!-- 主要是利用css,js解析器對(duì)<!-- 進(jìn)行不同的解析來實(shí)現(xiàn)JS和CSS合并的。
1. CSS解析器 會(huì)忽略<!--符號(hào),
2. JS解析器會(huì)把<!--當(dāng)作注釋符號(hào),與// 注釋相同。
5、使用Image maps
Image maps 是把多個(gè)圖片合并成1個(gè)圖片,然后使用html中的<map>標(biāo)簽連接圖片,并實(shí)現(xiàn)點(diǎn)擊圖片不同的區(qū)域執(zhí)行不同的動(dòng)作,image map在導(dǎo)航條中比較容易使用到。
6、data嵌入圖片
這種方法把圖片進(jìn)行編碼直接嵌入到html中進(jìn)行使用,以減少HTTP請(qǐng)求,但這個(gè)會(huì)增加HTML頁(yè)面的大小,而且這樣嵌入的圖片不能緩存。
7、把靜態(tài)資源單獨(dú)放一臺(tái)靜態(tài)服務(wù)器或CDN,另外也可以做下CSS / JS /IMAGES 合并,可以在firefox下用Yslow插件分析一下。
如果負(fù)載高:
1)可以統(tǒng)計(jì)一下每個(gè)動(dòng)態(tài)程序的執(zhí)行時(shí)間,時(shí)間長(zhǎng)的程序優(yōu)化下
2)頁(yè)面上可能有太多動(dòng)態(tài)操作功能,有些可以考慮做成異步
3)增加前端WEB SERVER,負(fù)載均衡分擔(dān)請(qǐng)求
8、最簡(jiǎn)單的辦法是使用長(zhǎng)連接(Socket)或設(shè)置HTTP的Keep-Alive字段。特別對(duì)于圖片密集型的應(yīng)用,一定要做持久連接。頻繁建立連接,很耗資源的。另外有可能是hacker在進(jìn)行HTTP Flood攻擊
要減少http請(qǐng)求數(shù),應(yīng)該從動(dòng)靜態(tài)分離、合并JS文件跟CSS文件、合并框架圖片以及相對(duì)變動(dòng)較少的圖片成一張,通過CSS背景切割來完成渲染,比如:加速圖片顯示、合理使用本地Cache來緩存JS/CSS/IMAGE等方面入手,另外我補(bǔ)充幾點(diǎn):
1)壓縮JS體積:刪除JS中空白換行,注釋,混淆把長(zhǎng)變量換成短變量;
2)壓縮CSS體積:刪除CSS注釋、寫法盡量用簡(jiǎn)寫;
補(bǔ)充說明:壓縮、合并JS和CSS都由程序處理。而不是自己手動(dòng)去縮刪,不然不利于后期維護(hù)。
3)減少http請(qǐng)求頭,圖片js/css等靜態(tài)資源放在靜態(tài)服務(wù)器或CDN服時(shí),盡量采用不用的域名,這樣能防止cookie不會(huì)互相污染,減少每次請(qǐng)求的往返數(shù)據(jù)。
相信看了這些方法,大家對(duì)如何減少http請(qǐng)求數(shù)有了一定的了解了吧。