前端性能優化(1)--減小HTTP請求

爲何減小HTTP請求可以優化性能？

1. HTTP請求創建和釋放須要時間
2. 瀏覽器對同一個域名的併發數量有限制

HTTP請求創建和釋放須要時間
HTTP請求從創建到關閉一共通過如下步驟，這些步驟都是須要花費時間的，在網絡狀況差的狀況下，花費的時間更長。若是頁面的資源很是碎片化，每一個HTTP請求只帶回來幾K甚至不到1K的數據（好比各類小圖標）那性能是很是浪費的。

1. 客戶端鏈接到Web服務器
2. 發送HTTP請求
3. 服務器接受請求並返回HTTP響應
4. 釋放鏈接TCP連接

瀏覽器對同一個域名的併發數量有限制
瀏覽器對同一個域名下的資源請求是有限制的，若是頁面的併發資源很是多，那後續的資源請求只能等到前面的資源下載完後纔開始，這也是爲何咱們能在chrome network 的Timing看到Queueing時間（緣由之一，另外還有資源優先級什麼的）

另附上各瀏覽器的併發數量

解決方案

1. CSS Sprites技術
2. 內聯圖片 & base64
3. 合併腳本和樣式表

CSS Sprites技術
傳說中的雪碧圖，能夠將多張圖片合成一張，用background-position來定位具體圖片的技術，很是適用於一整套小圖標的應用場景。以下圖：

.img{
    width: 100px;
    height: 100px;
    background-image:url('image.png');
    background-position: -100% -200%;
    background-size: 700% 600%;
}

內聯圖片 & base64
使用data:url的模式能夠在頁面中包含圖片，但不須要額外的http請求，缺點也有：

1. 體積會大約增長1/3；
   
2. 不能單獨緩存，只能依賴於宿主（html/css文件）的緩存方式。

例子(一個紅色箭頭，可拷貝data:image/png...到瀏覽器中查看)

background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAATCAMAAACwcE1OAAAAaVBMVEUAAADxN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN02cyeRvAAAAInRSTlMAB/z33dRlJPDq48q7lnJMQDItHBUQAwHxxqukhHpbVVM33r4k4AAAAH5JREFUKM99zkcWgkAQRdGiA0kEQcCc/v4XKaePEvQXd/omT5bKWFZUxu702hyBLNFqm2PgO16jDYKiZ/VwwceW5RtGZP+Jifnbry1m0p/9fY4F17HpSRHNps8Ykf0riPJb72BMJcHLgkqbMJ1B4dph2kN16iXGiofUDiqfvAHr4Sb7hIVYtAAAAABJRU5ErkJggg==')

合併腳本和樣式表
通常網站都用到了不少的js代碼和css代碼，尤爲是對於用了模塊化的網站來講，文件很是多，很是碎片化，初次啓動頁面的時候，可能一會兒就幾十個請求出去了，致使首屏時間特別的慢。有關資料現實（以下網址），合併文件的效率要比不合並高1/3。因此，對於資源特別碎片的網站，建議合併一些通用的代碼，減小http請求。
下面是兩個地址

（來源於O'RILLY《高性能網站建設指南》）

沒有合併資源：http://stevesouders.com/examp...（本人測試的1213ms）

合併資源的：http://stevesouders.com/examp... （本人測試909ms）