提高網站通路速度的34條軍規（1）

1 減少HTTP請求數量 (Minimize HTTP Requests)---據網絡整理

80%的使用者響應時間被花費在前端，而這其中的絕大多數時間是用于下載下傳頁面中的圖檔、樣式表、腳本以及Flash這些元件。減少這些元件的數量就可以減少展示頁面所需的請求數，而這是提高網頁響應速度的關鍵。

樸素的頁面設計當然是減少元件的一種途徑，但有沒有能兼顧豐富的頁面内容和快速的響應速度的方法呢？下面就是一些不錯的技巧，能在提供豐富的頁面展現的同時，減少Http請求數量：

合并檔案，通過把所有腳本置于一個腳本檔案裡或者把所有樣式表放于一個樣式表檔案中，進而減少Http請求的數量。當不同頁面需要應用不同的腳本或樣式時，合并這些檔案會是一個很大的挑戰，不過在釋出網站時進行這種合并，将是提高網站響應速度的重要一步。

CSS Sprites是減少圖檔請求的首選方案。把所有的背景圖檔合并到一張圖中，使用CSS的background-image 和

background-position

屬性去控制展現恰當的圖檔區域。

此方法原理：CSS Sprites其實就是把網頁中一些背景圖檔整合到一張圖檔檔案中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精确的定位出背景圖檔的位置。
優點：1.對于目前網絡流行的速度而言，不高于200KB的單張圖檔的所需載入時間基本是差不多的，加速的關鍵，不是降低重量，而是減少個數；
2.解決了圖檔命名上的困擾，隻需對一張集合的圖檔上命名就可以了；
3更換風格友善，隻需要在一張或少張圖檔上修改圖檔的顔色或樣式，整個網頁的風格就可以改變，維護起來更加友善。
缺點：1.在圖檔合并的時候，你要把多張圖檔有序的合理的合并成一張圖檔，還要留好足夠的空間，防止闆塊内不會出現不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的螢幕下的自适應頁面，你的圖檔如果不夠寬，很容易出現背景斷裂；
2.CSS Sprites在開發的時候比較麻煩，你要通過photoshop或其他工具測量計算每一個背景單元的精确位置，可用騰訊鬼哥開發的CSS Sprites 樣式生成工具，提高效率；
3.維護的時候比較麻煩。
實作例子
.bg_sprite{background-image:url(/整圖位址); background-repeat:no-repeat}
引用該類 .. 然後在元素中逐一定義背景坐标 .. 以下為關鍵屬性 ..
#ico1 {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}
#ico2 {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}
#ico3 {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}
.nav {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}
必須要限定容器大小符合背景圖元素位置 .. 另外 .. XY軸是相對于整張圖檔的左上角來算的 .. 是以取值一定要算清楚      

Image maps把多張圖檔組合成為一張圖檔。圖檔的總大小是不變的，但減少Http請求數會提高頁面的響應速度。Image maps隻能用于圖檔在網頁中相鄰的情況，比如導覽列。制定image maps中的圖檔坐标是個很麻煩的過程，而且容易出錯。同時給導航使用image maps也并不易讀，是以并不推薦使用。

内聯圖檔使用data: URL scheme 把圖檔資料嵌入頁面，但這會增加Html文檔的大小。把内聯圖檔合并到你被緩存的的樣式表中是一個能既減少HTTP請求數又不會增加頁面大小的方法。但目前并不是所有的主流浏覽器都支援内聯圖檔。

減少頁面的Http請求數量是第一步，而且對于提高使用者初次通路體驗是最重要的一步。正如在 Tenni Theurer的blog中的Browser Cache Usage - Exposed!裡描述的，每天，有40%-60%的訪客并沒有你的網站的緩存檔案。提高這些初次訪客的通路速度是提高使用者體驗的關鍵。