為什么要提升web性能？
Web性能黃金準(zhǔn)則：只有10%20%的最終用戶(hù)響應(yīng)時(shí)間花在了下載html文檔上踏兜，其余的80%90%時(shí)間花在了下載頁(yè)面組件上。
web性能對(duì)于用戶(hù)體驗(yàn)有及其重要的影響郊愧，根據(jù)著名的2-5-8原則：
- 當(dāng)用戶(hù)在2秒以?xún)?nèi)得到響應(yīng)掏呼，會(huì)感覺(jué)系統(tǒng)的響應(yīng)非常快
- 當(dāng)用戶(hù)在2-5秒之內(nèi)得到響應(yīng)笼裳，會(huì)感覺(jué)系統(tǒng)的響應(yīng)速度還可以
- 當(dāng)用戶(hù)在5-8秒之內(nèi)得到響應(yīng)唯卖，會(huì)感覺(jué)系統(tǒng)的響應(yīng)非常慢粱玲，但還可以接受
- 當(dāng)用戶(hù)在8秒之后都沒(méi)有得到響應(yīng)，會(huì)感覺(jué)系統(tǒng)糟透了拜轨，甚至系統(tǒng)已經(jīng)掛掉抽减；要么打開(kāi)競(jìng)爭(zhēng)對(duì)手的網(wǎng)站，要么重新發(fā)起第二次請(qǐng)求
凡事都需要研究橄碾，通過(guò)科學(xué)的研究我們就可以找到事物的發(fā)展規(guī)律卵沉。這里要感謝雅虎的工程師總結(jié)的14條前端優(yōu)化法則，使得我們可以站在巨人的肩膀上法牲∈泛梗《高性能網(wǎng)站建設(shè)》這本書(shū)中的14條優(yōu)化原則，總結(jié)起來(lái)主要是以下個(gè)方面的優(yōu)化：
- 減少HTTP請(qǐng)求
- 頁(yè)面內(nèi)部?jī)?yōu)化
- 啟用緩存
- 減少下載量
- 網(wǎng)絡(luò)連接上的優(yōu)化
本文主要講如何減少HTTP請(qǐng)求
為什么減少HTTP請(qǐng)求可以提高Web性能拒垃？
要回答這個(gè)問(wèn)題停撞，我們就要了解當(dāng)瀏覽器向服務(wù)器發(fā)送一個(gè)http請(qǐng)求知道獲取數(shù)據(jù)都經(jīng)歷哪些過(guò)程：
開(kāi)啟一個(gè)鏈接（tcp/ip的三次握手過(guò)程） -》 發(fā)送請(qǐng)求 -》 等待（網(wǎng)絡(luò)延遲跟服務(wù)器的處理時(shí)間）-》 下載數(shù)據(jù)
我們看一下百度首頁(yè)中的http請(qǐng)求在各階段耗費(fèi)的時(shí)間，上面不同的顏色代表下圖中的不同階段
可以看到除了圖片之外悼瓮，其余大部分http請(qǐng)求的事件花在了建立連接與等待階段戈毒。
http協(xié)議建立在TIC/IP協(xié)議之上，在TCP/IP協(xié)議中横堡，TCP協(xié)議提供可靠的連接服務(wù)埋市，采用三次握手建立一個(gè)連接。 簡(jiǎn)單來(lái)說(shuō)三次握手就是一個(gè)身份確認(rèn)的過(guò)程：
（第一次握手：主機(jī)A發(fā)送位碼為syn＝1,隨機(jī)產(chǎn)生seq number=1234567的數(shù)據(jù)包到服務(wù)器命贴，主機(jī)B由SYN=1知道道宅，A要求建立聯(lián)機(jī)；）
晴兒：你是瀟哥哥嗎套么，我是晴兒
（第二次握手：主機(jī)B收到請(qǐng)求后要確認(rèn)聯(lián)機(jī)信息培己，向A發(fā)送ack number=(主機(jī)A的seq+1),syn=1,ack=1,隨機(jī)產(chǎn)生seq=7654321的包）
瀟劍：這貨是誰(shuí)，一簫一劍走江湖胚泌，下一句是什么省咨？
（第三次握手：主機(jī)A收到后檢查ack number是否正確，即第一次發(fā)送的seq number+1,以及位碼ack是否為1玷室，若正確零蓉，主機(jī)A會(huì)再發(fā)送ack number=(主機(jī)B的seq+1),ack=1，主機(jī)B收到后確認(rèn)seq值與ack=1則連接建立成功穷缤。）
晴兒：這首詩(shī)敌蜂。。津肛。你真的是瀟哥哥章喉，一蕭一劍走江湖，千古情愁酒一回。秸脱。落包。
瀟劍：晴兒，你真的是晴兒摊唇。咐蝇。。巷查。
（三次握手過(guò)程結(jié)束）
言歸正傳有序，這個(gè)過(guò)程也是需要消耗時(shí)間的，在百度首頁(yè)找到一個(gè)極端的例子：
由此我們可以得出結(jié)論：一個(gè)http請(qǐng)求絕大多數(shù)的時(shí)間消耗在了建立連接跟等待的時(shí)間旭寿，優(yōu)化的方法是減少http請(qǐng)求。
如何提高web性能崇败？
1许师、減少HTTP請(qǐng)求
一般來(lái)說(shuō)要減少http請(qǐng)求通常從兩個(gè)方面下手：減少圖片的請(qǐng)求、減少腳本文件與樣式表的請(qǐng)求
圖片的減少通常有兩種方式：css sprites僚匆、內(nèi)聯(lián)圖片、IconFont搭幻。
CSS Sprites：將多張圖片合并成一幅單獨(dú)的圖片咧擂，使用css的background-position屬性，將html元素的背景圖片放到sprites 圖片中的期望位置上檀蹋。使用這項(xiàng)技術(shù)的附加優(yōu)點(diǎn)是他降低了下載量松申，合并后的圖片比分離的圖片和更小，因?yàn)樗档土藞D片自身的開(kāi)銷(xiāo)（顏色表俯逾、格式信息等等）贸桶。實(shí)際項(xiàng)目中css sprites是一項(xiàng)體力活，因?yàn)殚_(kāi)發(fā)過(guò)程中需要對(duì)這張大圖進(jìn)行維護(hù)（添加桌肴、減少圖片）皇筛，張?chǎng)涡裢瑢W(xué)的文章中有介紹如何管理sprites圖片可以作為參考（這里）。如果需要在頁(yè)面中為背景坠七、鏈接水醋、導(dǎo)航欄提供大量的圖片，css sprites絕對(duì)是一種優(yōu)秀的解決方案（干凈的標(biāo)簽彪置、較少的圖片拄踪、較短的響應(yīng)時(shí)間）。
內(nèi)聯(lián)圖片：通過(guò)使用data:URL模式可以再頁(yè)面中包含圖片而無(wú)需任何額外的請(qǐng)求拳魁。缺點(diǎn)就是IE8以下的瀏覽器不支持這種方式惶桐，而IE8在數(shù)據(jù)大小上有限制，只能支持23kb以?xún)?nèi)的數(shù)據(jù)。對(duì)于較小的圖片來(lái)說(shuō)可以直接內(nèi)聯(lián)到web頁(yè)面中姚糊，但對(duì)于大圖片內(nèi)聯(lián)到頁(yè)面里會(huì)導(dǎo)致頁(yè)面變大贿衍，聰明的做法是使用css，將內(nèi)聯(lián)的圖片作為背景使用叛拷，并放到外部樣式表中舌厨，這意味著數(shù)據(jù)可以緩存在樣式表內(nèi)部。使用外部樣式表雖然增加了一個(gè)http請(qǐng)求忿薇，但樣式可以被瀏覽器緩存裙椭，得到額外的收獲。另外一點(diǎn)需要注意：base64是有損壓縮署浩。
IconFont：圖標(biāo)字體揉燃，這是近年來(lái)新流行的一種以字體代替圖片的技術(shù)。它可以適應(yīng)任何分辨率而不會(huì)出現(xiàn)圖片模糊問(wèn)題筋栋，與圖片相比它具有更小的容量炊汤，更高的靈活性（像字體一樣可以設(shè)置圖標(biāo)大小、顏色弊攘、透明度抢腐、hover狀態(tài)、反轉(zhuǎn)等）襟交，IE8以上的瀏覽器都支持該技術(shù)迈倍。在使用IconFont之前，你首先要確定你選則的字體庫(kù)是否是收費(fèi)捣域。詳細(xì)內(nèi)容可以參考這篇文章：圖標(biāo)字體化淺談
減少腳本與樣式表的請(qǐng)求主要原則就是合并啼染。在實(shí)際開(kāi)發(fā)中我們遵循模塊化的原則將代碼分散到許多小文件中，按照軟件開(kāi)發(fā)的原則這是完全正確的焕梅，但對(duì)于上線頁(yè)面來(lái)說(shuō)迹鹅，每一個(gè)文件都會(huì)產(chǎn)生一個(gè)http請(qǐng)求，嚴(yán)重影響性能贞言。和css sprites一樣斜棚，將這些小文件合并到一個(gè)文件中，可以減少http請(qǐng)求的數(shù)量并縮短最終用戶(hù)響應(yīng)時(shí)間该窗。在合并過(guò)程中我們還需要使用工具精簡(jiǎn)（移除不必要的字符以減小文件大小縮減下載時(shí)間）和混淆（除了移除不必要字符外打肝，還會(huì)改寫(xiě)源代碼，比如函數(shù)和變量名使用更短的標(biāo)量名）Javascript代碼挪捕。對(duì)于采用AMD或CMD進(jìn)行模塊化開(kāi)發(fā)的同學(xué)粗梭，在合并過(guò)程中通常會(huì)將依賴(lài)的其他模塊打包到一個(gè)文件中，而模板html通常以字符串的方式內(nèi)聯(lián)到Javascript文件中级零。目前最常用的前端構(gòu)建工具就是glup断医，這里有一篇初步應(yīng)用的文章：前端 | gulp 打包 require.js 模塊依賴(lài)
