高並發大流量專題---3、前端優化（減少HTTP請求次數）

一、總結

一句話總結：

圖片地圖：使用<map><area></area></map>標簽。圖片地圖允許你在一個圖片上關聯多個URL。目標URL的選擇取決於用戶單擊了圖片上的哪個位置。

CSS Sprites：SS Sprites中文翻譯為CSS精靈，通過使用合並圖片，通過指定css的backgroud-image和backgroud-position來顯示元素。

合並腳本和樣式表：使用外部的js和css文件引用的方式，因為這要比直接寫在頁面中性能要更好一點。把多個腳本合並為一個腳本，把多個樣式表合並為一個樣式表

圖片使用Base64編碼減少頁面請求數：采用Base64的編碼方式將圖片直接嵌入到網頁中，而不是從外部載入

 

1、為什么要減少HTTP請求？

性能黃金法則：只有10%-20%的最終用戶響應時間花在接收請求的HTML文檔上，剩下的80%-90%時間花在HTML文檔所引用的所有組件（圖片，script，css，flash等等）進行的HTTP請求上。

HTTP連接產生開銷：域名解析--TCP連接--發送請求--等待--下載資源--解析時間

 

2、http1.1是Keep-Alive，為什么還需要減少HTTP請求？

HTTP1.1協議請求只能串行發送：HTTP1.1協議規定請求只能串行發送，也就是說一百個請求必須依次逐個發送，前面的一個請求完成才能開始下個請求

雖然不會花費tcp三次握手時間：但是本身是串行請求

 

3、已經有了DNS緩存，為什么我們還是要 減少HTTP請求？

查找DNS緩存也需要時間：多個緩存就要查找多次，也有可能緩存會被清除

 

4、減少HTTP請求的方式的本質？

減少組件的數量：改善響應時間的最簡單途徑就是減少組件的數量，並由此減少HTTP請求的數量。

 

5、減少HTTP請求的方式？

圖片地圖：使用<map><area></area></map>標簽。圖片地圖允許你在一個圖片上關聯多個URL。目標URL的選擇取決於用戶單擊了圖片上的哪個位置。

CSS Sprites：SS Sprites中文翻譯為CSS精靈，通過使用合並圖片，通過指定css的backgroud-image和backgroud-position來顯示元素。

合並腳本和樣式表：使用外部的js和css文件引用的方式，因為這要比直接寫在頁面中性能要更好一點。把多個腳本合並為一個腳本，把多個樣式表合並為一個樣式表

圖片使用Base64編碼減少頁面請求數：采用Base64的編碼方式將圖片直接嵌入到網頁中，而不是從外部載入

 

6、backgroud-position屬性 使用注意？

右下都是負

backgroud-position:x y；x和y可以寫負值也可以寫正值，我們可以想象圖片的左上方為（0，0），以（0，0）坐標向右是為負數的x軸，以（0，0）坐標向下是為負數的y軸。

 

7、圖片地圖與CSS精靈 的優化的性能 的量級？

快50%以上：圖片地圖與CSS精靈的響應時間基本上相同，但比使用各自獨立圖片的方式要快50%以上

 

8、獨立的一個js比用多個js文件組成的頁面 性能量級？

快38%：獨立的一個js比用多個js文件組成的頁面載入要快38%

 

 

 

 

二、內容在總結中