為什么要提升web性能？
Web性能黃金准則：只有10%~20%的最終用戶響應時間花在了下載html文檔上，其余的80%~90%時間花在了下載頁面組件上。
web性能對於用戶體驗有及其重要的影響，根據著名的`2-5-8`原則：
- 當用戶在2秒以內得到響應，會感覺系統的響應非常快
- 當用戶在2-5秒之內得到響應，會感覺系統的響應速度還可以
- 當用戶在5-8秒之內得到響應，會感覺系統的響應非常慢，但還可以接受
- 當用戶在8秒之后都沒有得到響應，會感覺系統糟透了，甚至系統已經掛掉；要么打開競爭對手的網站，要么重新發起第二次請求
凡事都需要研究，通過科學的研究我們就可以找到事物的發展規律。這里要感謝雅虎的工程師總結的14條前端優化法則，使得我們可以站在巨人的肩膀上。《高性能網站建設》這本書中的14條優化原則，總結起來主要是以下個方面的優化：
- 減少HTTP請求
- 頁面內部優化
- 啟用緩存
- 減少下載量
- 網絡連接上的優化
本文主要講如何減少HTTP請求
為什么減少HTTP請求可以提高Web性能？
要回答這個問題，我們就要了解當瀏覽器向服務器發送一個http請求知道獲取數據都經歷哪些過程：
開啟一個鏈接（tcp/ip的三次握手過程） -》 發送請求 -》 等待（網絡延遲跟服務器的處理時間）-》 下載數據
我們看一下百度首頁中的http請求在各階段耗費的時間，上面不同的顏色代表下圖中的不同階段
可以看到除了圖片之外，其余大部分http請求的事件花在了建立連接與等待階段。
http協議建立在TIC/IP協議之上，在TCP/IP協議中，TCP協議提供可靠的連接服務，采用三次握手建立一個連接。 簡單來說三次握手就是一個身份確認的過程：
（第一次握手：主機A發送位碼為syn＝1,隨機產生seq number=1234567的數據包到服務器，主機B由SYN=1知道，A要求建立聯機；）
晴兒：你是瀟哥哥嗎，我是晴兒
（第二次握手：主機B收到請求后要確認聯機信息，向A發送ack number=(主機A的seq+1),syn=1,ack=1,隨機產生seq=7654321的包）
瀟劍：這貨是誰，一簫一劍走江湖，下一句是什么？
（第三次握手：主機A收到后檢查ack number是否正確，即第一次發送的seq number+1,以及位碼ack是否為1，若正確，主機A會再發送ack number=(主機B的seq+1),ack=1，主機B收到后確認seq值與ack=1則連接建立成功。）
晴兒：這首詩。。。你真的是瀟哥哥，一蕭一劍走江湖，千古情愁酒一回。。。
瀟劍：晴兒，你真的是晴兒。。。。
（三次握手過程結束）
言歸正傳，這個過程也是需要消耗時間的，在百度首頁找到一個極端的例子：
而等待的時間通常也大於內容下載的時間，這里同樣找到一個極端例子：
由此我們可以得出結論：一個http請求絕大多數的時間消耗在了建立連接跟等待的時間，優化的方法是減少http請求。
如何提高web性能？
1、減少HTTP請求
一般來說要減少http請求通常從兩個方面下手：減少圖片的請求、減少腳本文件與樣式表的請求
圖片的減少通常有兩種方式：css sprites、內聯圖片、IconFont。
CSS Sprites：將多張圖片合並成一幅單獨的圖片，使用css的background-position屬性，將html元素的背景圖片放到sprites 圖片中的期望位置上。使用這項技術的附加優點是他降低了下載量，合並后的圖片比分離的圖片和更小，因為它降低了圖片自身的開銷（顏色表、格式信息等等）。實際項目中css sprites是一項體力活，因為開發過程中需要對這張大圖進行維護（添加、減少圖片），張鑫旭同學的文章中有介紹如何管理sprites圖片可以作為參考（這里）。如果需要在頁面中為背景、鏈接、導航欄提供大量的圖片，css sprites絕對是一種優秀的解決方案（干凈的標簽、較少的圖片、較短的響應時間）。
內聯圖片：通過使用data:URL模式可以再頁面中包含圖片而無需任何額外的請求。缺點就是IE8以下的瀏覽器不支持這種方式，而IE8在數據大小上有限制，只能支持23kb以內的數據。對於較小的圖片來說可以直接內聯到web頁面中，但對於大圖片內聯到頁面里會導致頁面變大，聰明的做法是使用css，將內聯的圖片作為背景使用，並放到外部樣式表中，這意味着數據可以緩存在樣式表內部。使用外部樣式表雖然增加了一個http請求，但樣式可以被瀏覽器緩存，得到額外的收獲。另外一點需要注意：base64是有損壓縮。
IconFont：圖標字體，這是近年來新流行的一種以字體代替圖片的技術。它可以適應任何分辨率而不會出現圖片模糊問題，與圖片相比它具有更小的容量，更高的靈活性（像字體一樣可以設置圖標大小、顏色、透明度、hover狀態、反轉等），IE8以上的瀏覽器都支持該技術。在使用IconFont之前，你首先要確定你選則的字體庫是否是收費。詳細內容可以參考這篇文章：圖標字體化淺談
減少腳本與樣式表的請求主要原則就是合並。在實際開發中我們遵循模塊化的原則將代碼分散到許多小文件中，按照軟件開發的原則這是完全正確的，但對於上線頁面來說，每一個文件都會產生一個http請求，嚴重影響性能。和css sprites一樣，將這些小文件合並到一個文件中，可以減少http請求的數量並縮短最終用戶響應時間。在合並過程中我們還需要使用工具精簡（移除不必要的字符以減小文件大小縮減下載時間）和混淆（除了移除不必要字符外，還會改寫源代碼，比如函數和變量名使用更短的標量名）Javascript代碼。對於采用AMD或CMD進行模塊化開發的同學，在合並過程中通常會將依賴的其他模塊打包到一個文件中，而模板html通常以字符串的方式內聯到Javascript文件中。目前最常用的前端構建工具就是glup，這里有一篇初步應用的文章：前端 | gulp 打包 require.js 模塊依賴