摘要：表明是建立連接請(qǐng)求報(bào)文段，表明同意建立連接報(bào)文。第二次握手服務(wù)器收到報(bào)文段服務(wù)器收到客戶端報(bào)文段，需要對(duì)這個(gè)報(bào)文段進(jìn)行確認(rèn)，設(shè)置為。

最近工作之余一直在溫故js系列，想知新，想提升，以小技術(shù)點(diǎn)為節(jié)奏去回顧。今天突然想到回顧一下這個(gè)http知識(shí)，http知識(shí)有太多深層次需要學(xué)習(xí)，今天簡(jiǎn)要回顧，淺析下這個(gè)技術(shù)點(diǎn)。
主要通過(guò)五個(gè)步驟淺析這個(gè)過(guò)程，有錯(cuò)誤的地方，煩請(qǐng)斧正，互相學(xué)習(xí)。

當(dāng)發(fā)送一個(gè)URL請(qǐng)求時(shí)，不管這個(gè)URL是Web頁(yè)面的URL還是Web頁(yè)面上每個(gè)資源的URL，瀏覽器都會(huì)開啟一個(gè)線程來(lái)處理這個(gè)請(qǐng)求，同時(shí)在遠(yuǎn)程DNS服務(wù)器上啟動(dòng)一個(gè)DNS查詢，讓瀏覽器獲得請(qǐng)求對(duì)應(yīng)的IP地址。
（這兒涉及的“DNS 查詢和通過(guò) Socket 發(fā)送數(shù)據(jù)”知識(shí)點(diǎn)見(jiàn)鏈接文章）

瀏覽器與遠(yuǎn)程 Web 服務(wù)器通過(guò) TCP 三次握手協(xié)商來(lái)建立一個(gè) TCP/IP 連接。該握手包括一個(gè)同步報(bào)文，一個(gè)同步-應(yīng)答報(bào)文和一個(gè)應(yīng)答報(bào)文，這三個(gè)報(bào)文在 瀏覽器和服務(wù)器之間傳遞。該握手首先由客戶端嘗試建立起通信，而后服務(wù)器應(yīng)答并接受客戶端的請(qǐng)求，最后由客戶端發(fā)出該請(qǐng)求已經(jīng)被接受的報(bào)文。

ACK: ACK=1表示該報(bào)文段中有確認(rèn)號(hào)需要處理。
SYN: SYN=1 ACK=0表明是建立連接請(qǐng)求報(bào)文段，SYN=1 ACK=1表明同意建立連接報(bào)文。
FIN: FIN=1表示對(duì)端的數(shù)據(jù)已經(jīng)發(fā)送完畢，要求釋放連接。

客戶端發(fā)送連接請(qǐng)求報(bào)文段，將SYN值設(shè)為1，Sequence Number為x?？蛻舳诉M(jìn)入SYN_SEND狀態(tài)，等待服務(wù)器的確認(rèn)。

服務(wù)器收到客戶端SYN報(bào)文段，需要對(duì)這個(gè)SYN報(bào)文段進(jìn)行確認(rèn)，設(shè)置Acknowledgment Number為x+1(Sequence Number+1)。同時(shí)，自己自己還要發(fā)送SYN請(qǐng)求信息，將SYN值設(shè)為1，Sequence Number設(shè)為y。服務(wù)器端將上述所有信息放到一個(gè)報(bào)文段（即SYN+ACK報(bào)文段）中，一并發(fā)送給客戶端，服務(wù)器進(jìn)入SYN_RECV狀態(tài)。

客戶端收到服務(wù)器的SYN+ACK報(bào)文段后將Acknowledgment Number設(shè)置為y+1，向服務(wù)器發(fā)送ACK報(bào)文段，這個(gè)報(bào)文段發(fā)送完畢以后，客戶端和服務(wù)器端都進(jìn)入ESTABLISHED狀態(tài)，完成TCP三次握手。

完成三次握手，客戶端與服務(wù)器開始傳送數(shù)據(jù)，在上述過(guò)程中，還有一些重要的概念：

未連接隊(duì)列：在三次握手協(xié)議中，服務(wù)器維護(hù)一個(gè)未連接隊(duì)列，該隊(duì)列為每個(gè)客戶端的SYN包（syn=j）開設(shè)一個(gè)條目，該條目表明服務(wù)器已收到SYN包，并向客戶發(fā)出確認(rèn)，正在等待客戶的確認(rèn)包。這些條目所標(biāo)識(shí)的連接在服務(wù)器處于Syn_RECV狀態(tài)，當(dāng)服務(wù)器收到客戶的確認(rèn)包時(shí)，刪除該條目，服務(wù)器進(jìn)入ESTABLISHED狀態(tài)。 Backlog參數(shù)：表示未連接隊(duì)列的最大容納數(shù)目。

SYN-ACK 重傳次數(shù)：服務(wù)器發(fā)送完SYN－ACK包，如果未收到客戶確認(rèn)包，服務(wù)器進(jìn)行首次重傳，等待一段時(shí)間仍未收到客戶確認(rèn)包，進(jìn)行第二次重傳，如果重傳次數(shù)超過(guò)系統(tǒng)規(guī)定的最大重傳次數(shù)，系統(tǒng)將該連接信息從未連接隊(duì)列中刪除。注意，每次重傳等待的時(shí)間不一定相同。

未連接存活時(shí)間：是指未連接隊(duì)列的條目存活的最長(zhǎng)時(shí)間，也即服務(wù)從收到SYN包到確認(rèn)這個(gè)報(bào)文無(wú)效的最長(zhǎng)時(shí)間，該時(shí)間值是所有重傳請(qǐng)求包的最長(zhǎng)等待時(shí)間總和。有時(shí)我們也稱未連接存活時(shí)間為Timeout時(shí)間、SYN_RECV存活時(shí)間。

圖片及問(wèn)題轉(zhuǎn)自jimmy_thr的https://segmentfault.com/a/11...

很簡(jiǎn)單呀，因?yàn)?次就夠了,干嘛用4次。23333. 舉個(gè)例子吧，假如是2次的話， 可能會(huì)出現(xiàn)這樣一個(gè)情況。

當(dāng)客戶端發(fā)送一次請(qǐng)求A后，但是A在網(wǎng)絡(luò)延遲了很久， 接著客戶端又發(fā)送了一次B，但是此時(shí)A已經(jīng)無(wú)效了。 接著服務(wù)器相應(yīng)了B，并返回TCP連接頭，建立連接(這里就2次哈)。 然后，A 歷經(jīng)千山萬(wàn)水終于到服務(wù)器了， 服務(wù)器一看有請(qǐng)求來(lái)了，則接受，由于一開始A帶著的TCP格式都是正確的，那么服務(wù)器，理所應(yīng)當(dāng)?shù)囊卜祷爻晒B接的flag，但是，此時(shí)客戶端已經(jīng)判斷該次請(qǐng)求無(wú)效，廢棄了。 然后服務(wù)器，就這么一直掛著(浪費(fèi)資源)，造成的一個(gè)問(wèn)題是，md, 這個(gè)鍋是誰(shuí)的？ 所以，為了保險(xiǎn)起見(jiàn)，再補(bǔ)充一次連接就可以了。所以3次是最合適的。在Chinese中，以3為起稱為多，如果你用4，5，6，7，8...次的話，這不更浪費(fèi)嗎？

TCP/IP 連接建立后，瀏覽器會(huì)通過(guò)該連接向遠(yuǎn)程服務(wù)器發(fā)送 HTTP 的 GET 請(qǐng)求。遠(yuǎn)程服務(wù)器找到資源并使用 HTTP 響應(yīng)返回該資源，值為200的 HTTP 響應(yīng)狀態(tài)表示一個(gè)正確的響應(yīng)。

客戶端開始下載資源。請(qǐng)求返回后，便進(jìn)入了我們關(guān)注的前端模塊。瀏覽器會(huì)解析 HTML 成樹形的數(shù)據(jù)結(jié)構(gòu)DOM，生成 DOM Tree，瀏覽器將CSS代碼解析成樹形的數(shù)據(jù)結(jié)構(gòu)CSSOM，生成 CSS Rule Tree。
DOM 和 CSSOM 都是以 Bytes → characters → tokens → nodes → object model 這樣的方式生成最終的數(shù)據(jù)。DOM樹的構(gòu)建過(guò)程是一個(gè)深度遍歷過(guò)程：當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)都構(gòu)建好后才會(huì)去構(gòu)建當(dāng)前節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)。

DOM Tree和CSS Rule Tree結(jié)合生成Render Tree。

display:none 的節(jié)點(diǎn)不會(huì)被加入Render Tree，而visibility: hidden 則會(huì)。
? display : 隱藏對(duì)應(yīng)的元素但不擠占該元素原來(lái)的空間。
? visibility: 隱藏對(duì)應(yīng)的元素并且擠占該元素原來(lái)的空間
所以，如果某個(gè)節(jié)點(diǎn)最開始是不顯示的，設(shè)為display:none是更優(yōu)的。

有了Render Tree，瀏覽器知道網(wǎng)頁(yè)中有哪些節(jié)點(diǎn)、各個(gè)節(jié)點(diǎn)的CSS定義以及他們的從屬關(guān)系。接著就開始布局，計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置。

瀏覽器已經(jīng)知道了哪些節(jié)點(diǎn)要顯示、每個(gè)節(jié)點(diǎn)的CSS屬性是什么、每個(gè)節(jié)點(diǎn)在屏幕中的位置是哪里。就進(jìn)入了最后一步，按照算出來(lái)的規(guī)則，通過(guò)顯卡，把內(nèi)容畫到屏幕上。

而 javascript 又可以根據(jù) DOM API 操作DOM。比如JS修改了DOM或者CSS屬性，也會(huì)重新觸發(fā)布局和渲染的執(zhí)行過(guò)程。

關(guān)于這個(gè)問(wèn)題到這兒就可以結(jié)束了......圖已放，情未了，那順便把TCP四次揮手也寫這，結(jié)合圖去分析。

假設(shè)客戶端想要關(guān)閉連接，客戶端發(fā)送一個(gè) FIN 標(biāo)志位置為1的包(FIN=1，seq=x)，表示自己已經(jīng)沒(méi)有數(shù)據(jù)可以發(fā)送了，但是仍然可以接受數(shù)據(jù)。
發(fā)送完畢后，客戶端進(jìn)入 FIN_WAIT_1 狀態(tài)。

服務(wù)器端確認(rèn)客戶端的 FIN包，發(fā)送一個(gè)確認(rèn)包(ACK=1，ACKnum=x+1)，表明自己接受到了客戶端關(guān)閉連接的請(qǐng)求，但還沒(méi)有準(zhǔn)備好關(guān)閉連接。
發(fā)送完畢后，服務(wù)器端進(jìn)入 CLOSE_WAIT 狀態(tài)，客戶端接收到這個(gè)確認(rèn)包之后，進(jìn)入FIN_WAIT_2 狀態(tài)，等待服務(wù)器端關(guān)閉連接。

服務(wù)器端準(zhǔn)備好關(guān)閉連接時(shí)，向客戶端發(fā)送結(jié)束連接請(qǐng)求，F(xiàn)IN置為1(FIN=1，seq=y)。
發(fā)送完畢后，服務(wù)器端進(jìn)入 LAST_ACK 狀態(tài)，等待來(lái)自客戶端的最后一個(gè)ACK。

客戶端接收到來(lái)自服務(wù)器端的關(guān)閉請(qǐng)求，發(fā)送一個(gè)確認(rèn)包(ACK=1，ACKnum=y+1)，并進(jìn)入 TIME_WAIT狀態(tài)，等待可能出現(xiàn)的要求重傳的 ACK包。
服務(wù)器端接收到這個(gè)確認(rèn)包之后，關(guān)閉連接，進(jìn)入 CLOSED 狀態(tài)。
客戶端等待2MSL（2MSL，2 Maximum Segment Lifetime）之后，沒(méi)有收到回復(fù)，確保服務(wù)器端確實(shí)是關(guān)閉了，客戶端也關(guān)閉連接，進(jìn)入 CLOSED狀態(tài)。

學(xué)知識(shí)不會(huì)是為了面試，因?yàn)槊嬖嚂?huì)一層層的深入，不知道的就是不知道，不能逞強(qiáng)，最后坑了自己。多研究研究，才是真理。come on , basketball.