今天我來(lái)為大家講解第二個(gè)方法,讓大家網(wǎng)站打開(kāi)速度提高,那就是減少http的請(qǐng)求,為什么減少http的請(qǐng)求就能夠提高網(wǎng)站訪問(wèn)速度,首先我們來(lái)看看web的工作原理,首先我們輸入一個(gè)域名:http://www.jdcct.com 讓后按回車(chē),這時(shí)候這個(gè)域名就和指向的服務(wù)器建立連接,讓后瀏覽器就向服務(wù)器發(fā)http送請(qǐng)求信息,服務(wù)器收到用戶請(qǐng)求信息后,服務(wù)器就會(huì)向?yàn)g覽器端發(fā)送對(duì)應(yīng)的信息,瀏覽器收到服務(wù)端發(fā)送過(guò)來(lái)的信息后,就斷開(kāi)連接釋放連接;
     如果我們請(qǐng)求的網(wǎng)頁(yè)中有很多的javascript,css,圖片,這樣會(huì)頻繁的和服務(wù)器建立連接、釋放連接,這樣會(huì)極大的造成服務(wù)器資源的浪費(fèi),比如同意的網(wǎng)速,下載一個(gè)100K的css文件比下載兩個(gè)50K的css文件要快,我們?yōu)榱藴p少資源的浪費(fèi)就要減少http的請(qǐng)求,下面我為大家一一講解減少http請(qǐng)求的方法:



一、合并js/CSS文件:
         在Web項(xiàng)目的開(kāi)發(fā)中,js,css文件會(huì)隨著項(xiàng)目的開(kāi)發(fā)變得越來(lái)越多,越來(lái)越大,這就給給性能方面帶來(lái)一些問(wèn)題,如,頁(yè)面引入的的js,css越多的話,那么對(duì)就增加了http請(qǐng)求數(shù),解決該問(wèn)題的一個(gè)好的方法就是合并js,css文件。

         下面就簡(jiǎn)單介紹一個(gè)方法,十分簡(jiǎn)單.下面介紹以合并js文件為例
             (1)  G.js文件
               ~function(){
                     window.G={};
                                G.Method={
                                        add:function(){  alert(111);}
                                        ,sub:function(){  alert("減法");}
                                 };
              }();
        (2) T.js文件
              var T=(function(){
                     return {
                      t1:function(){alert("t1 method!")}
                             ,t2:function(){alert("t2方法!")}
                             ,sum:function(obj){return obj.x+obj.y;}
                      };
        }());
        上面列出了連個(gè)簡(jiǎn)單的js文件,下面就要寫(xiě)一個(gè)批處理文件來(lái)合并以上文件了
        (3) 合并js,css文件的批處理方法,文件名假設(shè)命名為 debug.bat
              copy  G.js+T.js  GT_bin.js   /b
               說(shuō)明:
                   (1)  輸入要合并的js文件,保存debug.bat文件,運(yùn)行debug.bat即可.
                   (2)  就這么一行代碼就搞定了,十分簡(jiǎn)單,GT_bin.js 為合并之后的文件名稱(chēng) , /b是固定參數(shù),文件合并之后,頁(yè)面就只引用GT_bin.js就可以了,從而減少了js文件的引用,到達(dá)了減少http請(qǐng)求的次數(shù),提高了網(wǎng)站的性能.
                  (3) 合并css文件方法也是如此。

二、圖片合并
            使用CSS Sprites圖片合并把網(wǎng)頁(yè)里面的多張圖片合成一張圖片,這減少http的請(qǐng)求數(shù)量,從而提升網(wǎng)站打開(kāi)速度,下面我來(lái)為大家講解CSS Sprites使用方法:
            我們用CSS Sprites工具把網(wǎng)頁(yè)上面幾張小的背景圖片整合到一張大圖片上面,讓后通過(guò)css樣式獲取圖片的位置,在把圖片顯示在網(wǎng)頁(yè)上面。
            來(lái)看一個(gè)CSS Sprites 圖片:

            圖片引用方式:.icons{background-position:-8px -95px;}

            使用技巧:

            小圖片排列方面:顏色相近的圖片放在一起,可以減少輸出的色數(shù),進(jìn)一步降低文件體積。
            整合圖片生成方面:PNG8的圖像比GIF圖像要小30%左右
            通過(guò)工具再壓縮:fireworks生成的PNG比photoshop更小,而一些專(zhuān)用的壓縮軟件也可以讓圖片再小一些。

總結(jié):今天主要是講的是減少http請(qǐng)求數(shù)量,提高網(wǎng)站訪問(wèn)速度的方法有:合并js/CSS文件,圖片合并,其實(shí)訪問(wèn)網(wǎng)站的大部分時(shí)間就是浪費(fèi)在過(guò)多的http請(qǐng)求,如果我們的網(wǎng)站文件減少了,就會(huì)大大的減少http請(qǐng)求數(shù),從而提高我們網(wǎng)站的訪問(wèn)速度。