雷霆万钧什么意思
首頁 詩詞 字典 板報 句子 名言 友答 勵志 學校 網站地圖
當前位置: 首頁 > 教程頻道 > 網站開發 > SEO優化 >

高性能網站建設之減少Http連接數

2010-09-05 來源:讀書人 【讀書人網(Reader8.cn):綜合教育門戶網站】
關于CSS背景圖合并工具,請大家參看隨筆:Css背景圖合并 工具功能增強(V0.1)
在對大訪問量網站進行性能優化時,其中有一點是盡量減少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: 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鍵移除選中圖片 
添加了工具圖標

雷霆万钧什么意思 4986697326797749035675488345520351885880902576125568183344357336654783186299413615704453869204315 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();