減少HTTP請求數量 (Minimize HTTP Requests)

tag:content

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

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

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

CSS Sprites是減少圖片請求的首選方案。把所有的背景圖片合并到一張圖中，使用CSS的background-image 和background-position 屬性去控制展現恰當的圖片區域。

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

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

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

總結

以上是生活随笔為你收集整理的网站前端和后台性能优化1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。