等待資源加載時間和大部分情況下的瀏覽器單線程執(zhí)行是影響Web性能的兩大主要原因。
開發(fā)者的目標(biāo)就是盡可能快的發(fā)送請求的信息，至少看起來相當(dāng)快。Web性能優(yōu)化需要做的就是盡可能快的使頁面加載完成。
頁面加載過程
導(dǎo)航
導(dǎo)航是加載web頁面的第一步。它發(fā)生在以下情形：用戶通過在地址欄輸入一個URL、點擊一個鏈接、提交表單或者是其他的行為
性能優(yōu)化之一：縮短導(dǎo)航完成所話費的事件。
瀏覽器輸入地址后：
1、DNS域名解析
- 尋找資源位置
- 返回IP地址（第一次初始化請求之后，這個IP地址會被緩存一段時間，這樣可以通過緩存檢索IP地址而無需通過域名服務(wù)器進(jìn)行查找來加速后續(xù)的請求）
-
用法IP地址，瀏覽器通過TCP‘三次握手’與服務(wù)器建立連接。
image.png
三次握手
第一次握手：客戶端給服務(wù)端發(fā)一個 SYN 報文，并指明客戶端的初始化序列號 ISN(c)。此時客戶端處于 SYN_SEND 狀態(tài)。
第二次握手：服務(wù)器收到客戶端的 SYN 報文之后，會以自己的 SYN 報文作為應(yīng)答，并且也是指定了自己的初始化序列號 ISN(s)。同時會把客戶端的 ISN + 1 作為ACK 的值，表示自己已經(jīng)收到了客戶端的 SYN，此時服務(wù)器處于 SYN_RCVD 的狀態(tài)。
第三次握手：客戶端收到 SYN 報文之后，會發(fā)送一個 ACK 報文，當(dāng)然，也是一樣把服務(wù)器的 ISN + 1 作為 ACK 的值，表示已經(jīng)收到了服務(wù)端的 SYN 報文，此時客戶端處于 ESTABLISHED 狀態(tài)。服務(wù)器收到 ACK 報文之后，也處于 ESTABLISHED 狀態(tài)，此時，雙方已建立起了連接。
四次揮手
剛開始雙方都處于 ESTABLISHED 狀態(tài)，假如是客戶端先發(fā)起關(guān)閉請求。四次揮手的過程如下：
第一次揮手：客戶端發(fā)送一個 FIN 報文，報文中會指定一個序列號。此時客戶端處于 FIN_WAIT1 狀態(tài)。
即發(fā)出連接釋放報文段（FIN=1，序號seq=u），并停止再發(fā)送數(shù)據(jù)，主動關(guān)閉TCP連接，進(jìn)入FIN_WAIT1（終止等待1）狀態(tài)，等待服務(wù)端的確認(rèn)。第二次揮手：服務(wù)端收到 FIN 之后，會發(fā)送 ACK 報文，且把客戶端的序列號值 +1 作為 ACK 報文的序列號值，表明已經(jīng)收到客戶端的報文了，此時服務(wù)端處于 CLOSE_WAIT 狀態(tài)。
即服務(wù)端收到連接釋放報文段后即發(fā)出確認(rèn)報文段（ACK=1，確認(rèn)號ack=u+1，序號seq=v），服務(wù)端進(jìn)入CLOSE_WAIT（關(guān)閉等待）狀態(tài)，此時的TCP處于半關(guān)閉狀態(tài)，客戶端到服務(wù)端的連接釋放?？蛻舳耸盏椒?wù)端的確認(rèn)后，進(jìn)入FIN_WAIT2（終止等待2）狀態(tài)，等待服務(wù)端發(fā)出的連接釋放報文段。第三次揮手：如果服務(wù)端也想斷開連接了，和客戶端的第一次揮手一樣，發(fā)給 FIN 報文，且指定一個序列號。此時服務(wù)端處于 LAST_ACK 的狀態(tài)。
即服務(wù)端沒有要向客戶端發(fā)出的數(shù)據(jù)，服務(wù)端發(fā)出連接釋放報文段（FIN=1，ACK=1，序號seq=w，確認(rèn)號ack=u+1），服務(wù)端進(jìn)入LAST_ACK（最后確認(rèn)）狀態(tài)，等待客戶端的確認(rèn)。-
第四次揮手：客戶端收到 FIN 之后，一樣發(fā)送一個 ACK 報文作為應(yīng)答，且把服務(wù)端的序列號值 +1 作為自己 ACK 報文的序列號值，此時客戶端處于 TIME_WAIT 狀態(tài)。需要過一陣子以確保服務(wù)端收到自己的 ACK 報文之后才會進(jìn)入 CLOSED 狀態(tài)，服務(wù)端收到 ACK 報文之后，就處于關(guān)閉連接了，處于 CLOSED 狀態(tài)。
即客戶端收到服務(wù)端的連接釋放報文段后，對此發(fā)出確認(rèn)報文段（ACK=1，seq=u+1，ack=w+1），客戶端進(jìn)入TIME_WAIT（時間等待）狀態(tài)。此時TCP未釋放掉，需要經(jīng)過時間等待計時器設(shè)置的時間2MSL后，客戶端才進(jìn)入CLOSED狀態(tài)。
image.png
作者：猿人谷
鏈接：https://juejin.cn/post/6844903958624878606
來源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
