我們這里要談及的「Web性能優(yōu)化」，是指在用戶輸入URL后烫止，到頁面顯示出來所花的時間較少奈泪，而不是什么CPU占用資源少（這是指服務(wù)器端的性能優(yōu)化）。既然知道了我們的目的黎侈，自然就要了解察署，我們從輸入URL到頁面顯示是一個怎樣的過程呢？然后在過程中逐一優(yōu)化峻汉。
- 緩存
我們在瀏覽器輸入URL后贴汪，瀏覽器會先看是不是有緩存，如果已經(jīng)訪問過該網(wǎng)頁休吠，則會有緩存扳埂，可以很快顯示該網(wǎng)頁。緩存也分很多種瘤礁，后文會提及阳懂。
- DNS查詢
我們在瀏覽器輸入URL訪問服務(wù)器，但是其實服務(wù)器要的不是這個URL蔚携，要的是「IP地址」希太，所以我們要把這個URL轉(zhuǎn)換為IP地址，這個時候就需要查詢DNS了酝蜒，DNS查詢就像一個電話簿誊辉。比如我們輸入的URL相當(dāng)于電話簿中的姓名（暫不考慮重名情況），這樣就會對應(yīng)一個電話號碼（這個相當(dāng)于IP地址）亡脑。
（1）瀏覽器緩存：首先會向瀏覽器的緩存中查找是否有訪問記錄
（2）操作系統(tǒng)緩存：在系統(tǒng)運行中的內(nèi)存里查找是否有緩存堕澄。
（3）host文件：如果在緩存中查找不到邀跃，系統(tǒng)就會讀取系統(tǒng)中預(yù)設(shè)的host文件。
（4）路由器緩存：有些路由器也有緩存功能蛙紫。
（5）ISP DNS緩存：互聯(lián)網(wǎng)服務(wù)提供商（比如中國電信）也會提供DNS服務(wù)拍屑，比較有名的是114.114.114.114
（6）頂級/根DNS服務(wù)器：根域名收到請求后，會判別這個域名是授予了哪個服務(wù)器坑傅，并且返回這個頂級DNS服務(wù)器的IP地址僵驰，客戶端收到這個地址后便會訪問這個頂級服務(wù)器，如果該服務(wù)器無法解析唁毒，該服務(wù)器就會返回它下一級的DNS服務(wù)器的IP蒜茴，客戶端再次訪問，直到找到輸入的URL對應(yīng)的主機(jī)浆西。
優(yōu)化方案：
（1）減少DNS查詢
每次DNS查詢就是查找域名的過程粉私，那么如果查找的域名越少，DNS查詢就越少近零，所以我們應(yīng)該盡量把資源放在同一域名下诺核。（其實這么做也有其他問題，見下文）
- TCP連接
主要內(nèi)容是：三次握手和四次揮手久信，此處不展開贅述窖杀。
優(yōu)化方案：TCP連接復(fù)用，在HTTP請求頭中的Connection加上keep-alive裙士；HTTP2.0是多路復(fù)用陈瘦。
HTTP請求
優(yōu)化方案：
（1）減少Cookie體積。每個請求都會帶上Cookie潮售，所以Cookie小的話會加快速度痊项。
（2）把靜態(tài)資源放到CDN上，靜態(tài)資源一般無需使用 Cookie酥诽，可以把它們放在使用二級域名或者專門域名的無 Cookie 服務(wù)器上鞍泉，降低 Cookie 傳送的造成的流量浪費，提高響應(yīng)速度肮帐。
（3）使用Cache-Control咖驮。
（4）同時發(fā)送多個請求。這一步是瀏覽器自身會做的训枢，一般瀏覽器訪問一個域名會同時發(fā)送4~8個請求（根據(jù)瀏覽器不同而有所差異）托修，為了同時發(fā)送多個請求，我們自然而然想到了增加域名數(shù)量（一般通過CDN）恒界。
注意：這里出現(xiàn)了一個「矛盾」睦刃，在「DNS查詢」步驟中的優(yōu)化方案，我們明明是要減少域名數(shù)十酣，但是這里怎么要增加呢涩拙？這個時候就要做到「權(quán)衡」际长。如果我的文件很少（比如我html，css兴泥，js都只有一個）工育，那么就不如放在一個域名下面。接受響應(yīng)
優(yōu)化方案：
（1）ETag
MD5搓彻，請求一個文件帶上ETag如绸，服務(wù)器發(fā)現(xiàn)是最新的文件不需要更新，則會響應(yīng)一個304 Not Modified的狀態(tài)碼旭贬，這樣接受響應(yīng)的體積就很小竭沫。
（2）使用Gzip壓縮（注：已經(jīng)是壓縮格式的文件就不需要Gzip壓縮了，如圖片）骑篙，接受的響應(yīng)都是Gzip壓縮的，只不過接收后瀏覽器都幫我們解壓了森书。
接受完成（HTML）
DOCTYPE
優(yōu)化方案：「不要寫錯了靶端，也不要不寫」，不然瀏覽器會“猜”給的文檔是什么凛膏，可能一開始用HTML解析杨名，然后再用XML解析，這樣會浪費時間猖毫，還可能選擇錯誤的模式台谍。
- 逐行解析（普通標(biāo)簽，看到CSS吁断，看到JS）
（1）在我們看到普通標(biāo)簽的時候（比如<h1>）趁蕊，CSS或者JS會阻塞它的渲染嗎？（可以看看我的另一篇文章：http://www.reibang.com/p/a50fac65d698）
（2）看到CSS的時候仔役。下載CSS掷伙，在看下面還有沒有CSS，有的話也同時下載又兵，一個域名一共可以同時下載4~8個（根據(jù)瀏覽器而不同）任柜，但是解析的時候按順序逐一解析的。簡單來說就是「下載并行沛厨，解析串行」宙地。
（3）看到JS的時候。
優(yōu)化方案：
（1）使用CDN（針對CSS和JS）逆皮，增加域名數(shù)宅粥，就增加請求數(shù)。
（2）CSS放到head中电谣，JS放到body最后粹胯。CSS放后面一樣會阻塞渲染蓖柔，還不如放前面今早下載，有了樣式的頁面結(jié)構(gòu)讓用戶先看到风纠，JS放后面可以獲取之前的節(jié)點况鸣。
除開以上的優(yōu)化方案，還有一些竹观。
- 懶加載
- 避免空的src的圖片镐捧，如果寫成「src=""」會造成不必要的請求，可以寫成「src="about:blank"」
- 開發(fā)聰明的事件處理臭增，比如「事件委托」懂酱。有時候頁面看起來沒那么快，可能是因為綁定到不同元素的大量事件處理函數(shù)執(zhí)行了太多次誊抛，使用事件委托就可以提高效率列牺。另外不必等到「onload」事件來開始處理DOM樹，可以使用「DOMContentLoaded」拗窃，因為大多數(shù)時候我們只是想要處理的元素已經(jīng)在DOM樹中瞎领，無需等待所有圖片被下載。
參考：
