如何減少網站的http連接數

減少http不僅可以降低服務器的負載,提高網站打開速度,還可以讓源碼更易讀易懂。

通常減少http的做法有三:

第一:將css文件和js文件放到單獨的.css和.js文件中。

 

當瀏覽者瀏覽頁面以後,客戶端瀏覽器緩存會存儲css文件和js文件,這樣當次訪問者再次訪問網頁將直接從客戶端內存中讀取這兩個文件。而嵌在網頁中的js代碼和css代碼卻不能被緩存。

 

第二:減少iframe使用。

 

一個iframe跟一個單獨的頁面本質上沒有區別,客戶端在訪問時需要另行建立一個HTTP連接進行訪問,就好比你同時訪問了N+1個網頁。

 

第三:合併背景圖片。  典型案例:淘寶網

 

合併背景圖片就是,把頁面上所有的背景小圖片,合併到一張大圖片上面。再通過css的background-position控制要顯示整個圖片中的哪一小塊區域。原本每張背景圖片需要建立一個HTTP請求,現在只需要一次就OK,節約了N-1次HTTP請求。

操作代碼:

  1. background-image:url(總背景圖片的url);  
  2. background-repeat:no-repeat;  
  3. background-postion-x:5px;  
  4. background-position-y:-50px; 

其中postion-x, -y 橫豎座標定位背景圖片區域。


根據當前要顯示的小圖片在總背景圖片中的位置決定x、y。其中-50的表示圖片左上角的縱座標的位置減去50個像素。
更多





在對大訪問量網站進行性能優化時,其中有一點是儘量減少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)


發佈了39 篇原創文章 · 獲贊 4 · 訪問量 15萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章