優化網站的方法1-減小HTTP 請求

前端80%的響應時間花費在加載頁面的資源上。大部分時間都是在下載頁面的內容：圖片、樣式（CSS）、腳本（js），flash等。減小頁面上的內容，減小頁面的HTTP請求是可以使頁面加載快速的關鍵。 減小頁面上內容的方法之一就是頁面設計精簡。可是有沒有一種方法能讓頁面內容既豐富有加載速度快呢？有一些技術既能作到減小HTTP請求，並且還支持頁面豐富的內容。 合併文件是一種減小HTTP請求的方法，好比我把全部的腳本文件合併的一個腳本文件，把多個CSS文件合併成一個CSS文件。這種方式確實能改善頁面的響應時間。 CSS Sprites 是首先考慮的減小圖片請求的方法。合併你全部的背景圖片到一張圖片上，而後使用CSS的「backgroud-iamge」和「backgroud-position」屬性來顯示在頁面中你想要顯示的那部分圖片。 這個由多張圖片合併成的圖片地圖的大小和合並前那些圖片總共的大小沒多大差異，但屢次請求變成了一次請求，確實達到減小了HTTP請求的目的。可是在圖片地圖上定位要使用圖片的位置是挺枯燥且容易出錯的，因此好多人並不喜歡這麼作。 內聯圖使用「data:URL scheme」把圖片信息嵌入到頁面上。這樣增長了html的大小。把內聯圖合併到樣式文件中是減小HTTP請求且避免增長你頁面大小的方法。但內聯圖並不被全部主流的瀏覽器所支持。 減小你頁面上的HTTP請求是優化頁面的第一步。對於改善頁面被第一次訪問時的響應速度，減小頁面上HTTP請求是一個很重要的指導方針。據統計40-60%的進入你網站訪問的用戶的瀏覽器緩存裏沒有緩存你網站的任何信息。使你的頁面響應迅速是帶給用戶良好體驗的關鍵。 CSS Sprites：請參考http://alistapart.com/article/sprites