在對大訪問量網站進行性能優化時，其中有一點是盡量減少http連接數，道理很明了，減少了單個PV的http連接數，肯定可以增加單臺服務器的用戶負載數。

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

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

background-image: src="/upload/pic22/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文件截屏。

同時這個工具也是開源的，大家可以下載源代碼CssBgImageMergeTool.zip或者下載安裝文件CssBgImageMergeTool.exe.zip； 該程序運行需要安裝微軟的類庫.net framework 2.0

希望此工具可以給大家帶去方便。

本文名稱：高性能網站建設之減少Http連接數
當前URL：http://www.2m8n56k.cn/news2/278652.html

成都網站建設公司_創新互聯，為您提供企業網站制作、手機網站建設、動態網站、響應式網站、用戶體驗、外貿網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯