在對(duì)大訪問(wèn)量網(wǎng)站進(jìn)行性能優(yōu)化時(shí)，其中有一點(diǎn)是盡量減少http連接數(shù)，道理很明了，減少了單個(gè)PV的http連接數(shù)，肯定可以增加單臺(tái)服務(wù)器的用戶(hù)負(fù)載數(shù)。

減少Http連接數(shù)的具體方法是減少?zèng)]必要的iframe使用，合并js文件，css文件，和一種常見(jiàn)的方法，合并Css小背景圖，合并Css小背景圖這一點(diǎn)已經(jīng)有很多大網(wǎng)站都在做了，比如淘寶，百度貼吧，他們頁(yè)面上看似有很多小的背景圖片，而實(shí)際上這些圖片都被合并成了一張大圖，然后用Css的Background-positioin屬性控制顯示背景圖片的位置。這一點(diǎn)是很有效的，例如百度貼吧的一張背景圖如下

大家可以看到，百度的技術(shù)人員把n張小圖合并到了一張圖片上，而通過(guò)css控制在頁(yè)面上單獨(dú)顯示每一個(gè)小圖。這樣每一個(gè)用戶(hù)訪問(wèn)就相當(dāng)于減少了n-1個(gè)http連接數(shù)，這對(duì)于訪問(wèn)量大的網(wǎng)站來(lái)說(shuō)，吞吐量的提升是顯而易見(jiàn)的。
具體的Css是這樣的，以下面的頁(yè)面顯示的紅框部分為例，和上面的大圖對(duì)比，我們可以看到下面顯示的小圖片其實(shí)就是上面大背景圖的倒數(shù)第4個(gè)圖片，具體的css代碼如下（可以通過(guò)firefox安裝firebug插件或者通過(guò)個(gè)google瀏覽器查看元素的css）

background-image: url(http://tieba.baidu.com/tb/cms/img/index/sprites.png);
background-repeat: no-repeat;
background-position-x: 7px;
background-position-y: -253px;

其關(guān)鍵代碼在于background-position-y，這里是負(fù)值，表示背景圖的左上角的縱坐標(biāo)值x減去背景開(kāi)始顯示的位置的縱坐標(biāo)。

這個(gè)優(yōu)化方式很好，但是做起來(lái)卻比較費(fèi)事，做出小圖后需要把小圖整合到一張大圖上，然后再調(diào)整css中的背景位置。鑒于此，做了一個(gè)生成工具---Css背景圖合并工具，可以幫助大家完成整合小圖，并生成對(duì)應(yīng)css和html測(cè)試文檔的工作，如下截屏： 
可以調(diào)整小圖橫排還是縱排，選中下圖可以生成該小圖所在位置的css，css可以根據(jù)需要自己調(diào)整。
最后可以生成測(cè)試文件，測(cè)試文件中包括整合后的大圖，這些小圖對(duì)應(yīng)的所有css，和Html測(cè)試文件，如下生成的html文件截屏。

同時(shí)這個(gè)工具也是開(kāi)源的，大家可以下載源代碼CssBgImageMergeTool.zip或者下載安裝文件CssBgImageMergeTool.exe.zip； 該程序運(yùn)行需要安裝微軟的類(lèi)庫(kù).net framework 2.0

希望此工具可以給大家?guī)シ奖恪?