• <tbody id="lh4fb"></tbody>

    <legend id="lh4fb"><delect id="lh4fb"><small id="lh4fb"></small></delect></legend>
    1. 首頁 詩詞 字典 板報 句子 名言 友答 勵志 學校 網站地圖
      當前位置: 首頁 > 教程頻道 > 網站開發 > SEO優化 >

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

      2010-09-05 來源:讀書人 【讀書人網(www.zp552.com):綜合教育門戶網站】
      關于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鍵移除選中圖片 
      添加了工具圖標

      久久视频只有精品2019