高性能網站建設之減少Http連接數
減少Http連接數的具體方法是減少沒必要的iframe使用，合併js文件，css文件，和一種常見的方法，合併Css小背景圖，合併Css小背景圖這一點已經有很多大網站都在做了，比如淘寶，百度貼吧，他們頁面上看似有很多小的背景圖片，而實際上這些圖片都被合併成了一張大圖，然後用Css的Background-positioin屬性控制顯示背景圖片的位置。這一點是很有效的，例如百度貼吧的一張背景圖如下
大家可以看到，百度的技術人員把n張小圖合併到了一張圖片上，而通過css控制在頁面上單獨顯示每一個小圖。這樣每一個用戶訪問就相當於減少了n-1個http連接數，這對於訪問量大的網站來說，吞吐量的提升是顯而易見的。
具體的Css是這樣的，以下面的頁面顯示的紅框部分爲例，和上面的大圖對比，我們可以看到下面顯示的小圖片其實就是上面大背景圖的倒數第4個圖片，具體的css代碼如下（可以通過firefox安裝firebug插件或者通過個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;
其關鍵代碼在於background-position-y，這裏是負值，表示背景圖的左上角的縱座標值x減去背景開始顯示的位置的縱座標。
這個優化方式很好，但是做起來卻比較費事，做出小圖後需要把小圖整合到一張大圖上，然後再調整css中的背景位置。鑑於此，我做了一個生成工具---Css背景圖合併工具，可以幫助大家完成整合小圖，並生成對應css和html測試文檔的工作，如下截屏： 可以調整小圖橫排還是縱排，選中下圖可以生成該小圖所在位置的css，css可以根據需要自己調整。
最後可以生成測試文件，測試文件中包括整合後的大圖，這些小圖對應的所有css，和Html測試文件，如下生成的html文件截屏。
附最新的源文件，可執行文件。歡迎大家使用，反饋。(使用此工具需要安裝微軟的dot net framework 2.0)
希望此工具可以給大家帶去方便。
1. 添加了用鼠標拖動圖片或者用方向鍵改變圖片位置的功能
2. 可以設置整幅大圖的生成類型，因爲png文件在ie6下透明色顯示有問題，所以朋友提出這個問題
3. 可以設定大圖的背景色，默認爲透明色
4. 可以在選中圖片之後用「+」按鈕添加更多的圖片
5. 可以在選中圖片之後，用「-」按鈕移除圖片，或者直接用Delete鍵移除選中圖片
添加了工具圖標
-------------------------------------------------------------------------------