摘要：在瀏覽器中輸入到顯示網(wǎng)頁主要包含兩個部分網(wǎng)絡(luò)通信和頁面渲染互聯(lián)網(wǎng)內(nèi)各網(wǎng)絡(luò)設(shè)備間的通信都遵循協(xié)議，利用協(xié)議族進(jìn)行網(wǎng)絡(luò)通信時，會通過分層順序與對方進(jìn)行通信。狀態(tài)碼主要包括以下部分指示信息表示請求已接收，繼續(xù)處理。

在瀏覽器中輸入url到顯示網(wǎng)頁主要包含兩個部分： 網(wǎng)絡(luò)通信和頁面渲染
互聯(lián)網(wǎng)內(nèi)各網(wǎng)絡(luò)設(shè)備間的通信都遵循TCP/IP協(xié)議，利用TCP/IP協(xié)議族進(jìn)行網(wǎng)絡(luò)通信時，會通過分層順序與對方進(jìn)行通信。分層由高到低分別為：應(yīng)用層、傳輸層、網(wǎng)絡(luò)層、數(shù)據(jù)鏈路層。發(fā)送端從應(yīng)用層往下走，接收端從數(shù)據(jù)鏈路層網(wǎng)上走

1.瀏覽器的地址欄輸入U(xiǎn)RL并按下回車

我們常見的RUL是這樣的:www.baidu.com,域名通常由3部分組成：協(xié)議 域名 端口號

1. 協(xié)議：主要是HTTP協(xié)議，HTTPS協(xié)議，F(xiàn)TP協(xié)議，F(xiàn)ILe協(xié)議
2. 域名：url中間部分為域名或者IP
3. 端口號：通常默認(rèn)都是隱藏的 http默認(rèn)端口號為80 https默認(rèn)端口號為443

涉及知識點(diǎn)： 跨域
在前端進(jìn)行數(shù)據(jù)請求時，由于瀏覽器的同源策略，協(xié)議，域名，端口號有一個不同會存在跨域請求，需要進(jìn)行跨域處理，相關(guān)的跨域方法點(diǎn)擊user-gold-cdn.xitu.io/2018/11/19/…

2.DNS域名解析

互聯(lián)網(wǎng)上每一臺計(jì)算機(jī)的唯一標(biāo)識是它的IP地址，但是IP地址并不方便記憶。用戶更喜歡用方便記憶的網(wǎng)址去尋找互聯(lián)網(wǎng)上的其它計(jì)算機(jī)，也就是上面提到的百度的網(wǎng)址。所以互聯(lián)網(wǎng)設(shè)計(jì)者需要在用戶的方便性與可用性方面做一個權(quán)衡，這個權(quán)衡就是一個網(wǎng)址到IP地址的轉(zhuǎn)換，這個過程就是DNS解析，即實(shí)現(xiàn)了網(wǎng)址到IP地址的轉(zhuǎn)換

解析過程

DNS解析是一個遞歸查詢的過程。

上述圖片是查找www.google.com的IP地址過程。首先在本地域名服務(wù)器中查詢IP地址，如果沒有找到的情況下，本地域名服務(wù)器會向根域名服務(wù)器發(fā)送一個請求，如果根域名服務(wù)器也不存在該域名時，本地域名會向com頂級域名服務(wù)器發(fā)送一個請求，依次類推下去。直到最后本地域名服務(wù)器得到google的IP地址并把它緩存到本地，供下次查詢使用。從上述過程中，可以看出網(wǎng)址的解析是一個從右向左的過程: com -> google.com -> www.google.com。但是你是否發(fā)現(xiàn)少了點(diǎn)什么，根域名服務(wù)器的解析過程呢？事實(shí)上，真正的網(wǎng)址是www.google.com.，并不是我多打了一個.，這個.對應(yīng)的就是根域名服務(wù)器，默認(rèn)情況下所有的網(wǎng)址的最后一位都是.，既然是默認(rèn)情況下，為了方便用戶，通常都會省略，瀏覽器在請求DNS的時候會自動加上，所有網(wǎng)址真正的解析過程為: . -> .com -> google.com. -> www.google.com.。

?

DNS優(yōu)化

DNS緩存和DNS負(fù)載均衡

DNS緩存

DNS存在著多級緩存，從離瀏覽器的距離排序的話，有以下幾種: 瀏覽器緩存，系統(tǒng)緩存，路由器緩存，IPS服務(wù)器緩存，根域名服務(wù)器緩存，頂級域名服務(wù)器緩存，主域名服務(wù)器緩存。

1. 在你的chrome瀏覽器中輸入:chrome://dns/，你可以看到chrome瀏覽器的DNS緩存。

2. 系統(tǒng)緩存主要存在/etc/hosts(Linux系統(tǒng))中:

   ?

DNS負(fù)載均衡

真實(shí)的互聯(lián)網(wǎng)世界背后存在成千上百臺服務(wù)器，大型的網(wǎng)站甚至更多。但是在用戶的眼中，它需要的只是處理他的請求，哪臺機(jī)器處理請求并不重要。DNS可以返回一個合適的機(jī)器的IP給用戶，例如可以根據(jù)每臺機(jī)器的負(fù)載量，該機(jī)器離用戶地理位置的距離等等，這種過程就是DNS負(fù)載均衡，又叫做DNS重定向

3.建立TCP連接

在通過DNS域名解析后，獲取到了服務(wù)器的IP地址，在獲取到IP地址后，便會開始建立一次連接，這是由TCP協(xié)議完成的，主要通過三次握手進(jìn)行連接。

1. 第一次握手： 建立連接時，客戶端發(fā)送syn包（syn=j）到服務(wù)器，并進(jìn)入SYN_SENT狀態(tài)，等待服務(wù)器確認(rèn)；
2. 第二次握手： 服務(wù)器收到syn包，必須確認(rèn)客戶的SYN（ack=j+1），同時自己也發(fā)送一個SYN包（syn=k），即SYN+ACK包，此時服務(wù)器進(jìn)入SYN_RECV狀態(tài)；
3. 第三次握手： 客戶端收到服務(wù)器的SYN+ACK包，向服務(wù)器發(fā)送確認(rèn)包ACK(ack=k+1），此包發(fā)送完畢，客戶端和服務(wù)器進(jìn)入ESTABLISHED（TCP連接成功）狀態(tài)，完成三次握手。 這里需要了解下ACK，SYN的意義
   完成TCP連接后開使向服務(wù)器進(jìn)行請求

4.向服務(wù)器發(fā)送請求

完整的HTTP請求包含請求起始行、請求頭部、請求主體三部分。

?

5.服務(wù)器接受響應(yīng)

服務(wù)器在收到瀏覽器發(fā)送的HTTP請求之后，會將收到的HTTP報(bào)文封裝成HTTP的Request對象，并通過不同的Web服務(wù)器進(jìn)行處理，處理完的結(jié)果以HTTP的Response對象返回，主要包括狀態(tài)碼，響應(yīng)頭，響應(yīng)報(bào)文三個部分。
狀態(tài)碼主要包括以下部分:

1xx：指示信息–表示請求已接收，繼續(xù)處理。
2xx：成功–表示請求已被成功接收、理解、接受。
3xx：重定向–要完成請求必須進(jìn)行更進(jìn)一步的操作。
4xx：客戶端錯誤–請求有語法錯誤或請求無法實(shí)現(xiàn)。
5xx：服務(wù)器端錯誤–服務(wù)器未能實(shí)現(xiàn)合法的請求。

響應(yīng)頭主要由Cache-Control、 Connection、Date、Pragma等組成。
響應(yīng)體為服務(wù)器返回給瀏覽器的信息，主要由HTML，css，js，圖片文件組成。

6.頁面渲染

?如果說響應(yīng)的內(nèi)容是HTML文檔的話，就需要瀏覽器進(jìn)行解析渲染呈現(xiàn)給用戶。整個過程涉及兩個方面：解析和渲染。在渲染頁面之前，需要構(gòu)建DOM樹和CSSOM樹。 ?在瀏覽器還沒接收到完整的 HTML 文件時，它就開始渲染頁面了，在遇到外部鏈入的腳本標(biāo)簽或樣式標(biāo)簽或圖片時，會再次發(fā)送 HTTP 請求重復(fù)上述的步驟。在收到 CSS 文件后會對已經(jīng)渲染的頁面重新渲染，加入它們應(yīng)有的樣式，圖片文件加載完立刻顯示在相應(yīng)位置。在這一過程中可能會觸發(fā)頁面的重繪或重排。這里就涉及了兩個重要概念：Reflow和Repaint。

?

1. Reflow，也稱作Layout，中文叫回流，一般意味著元素的內(nèi)容、結(jié)構(gòu)、位置或尺寸發(fā)生了變化，需要重新計(jì)算樣式和渲染樹，這個過程稱為Reflow。
2. Repaint，中文重繪，意味著元素發(fā)生的改變只是影響了元素的一些外觀之類的時候（例如，背景色，邊框顏色，文字顏色等），此時只需要應(yīng)用新樣式繪制這個元素就OK了，這個過程稱為Repaint。

所以說Reflow的成本比Repaint的成本高得多的多。DOM樹里的每個結(jié)點(diǎn)都會有reflow方法，一個結(jié)點(diǎn)的reflow很有可能導(dǎo)致子結(jié)點(diǎn)，甚至父點(diǎn)以及同級結(jié)點(diǎn)的reflow。

7.關(guān)閉TCP連接或繼續(xù)保持連接

通過四次揮手關(guān)閉連接(FIN ACK, ACK, FIN ACK, ACK)。

?

1. 第一次揮手：Client發(fā)送一個FIN，用來關(guān)閉Client到Server的數(shù)據(jù)傳送，Client進(jìn)入FIN_WAIT_1狀態(tài)。
2. 第二次揮手：Server收到FIN后，發(fā)送一個ACK給Client，確認(rèn)序號為收到序號+1（與SYN相同，一個FIN占用一個序號），Server進(jìn)入CLOSE_WAIT狀態(tài)。
3. 第三次揮手：Server發(fā)送一個FIN，用來關(guān)閉Server到Client的數(shù)據(jù)傳送，Server進(jìn)入LAST_ACK狀態(tài)。
4. 第四次揮手：Client收到FIN后，Client進(jìn)入TIME_WAIT狀態(tài)，接著發(fā)送一個ACK給Server，確認(rèn)序號為收到序號+1，Server進(jìn)入CLOSED狀態(tài)，完成四次揮手。

作者：rosenWang
鏈接：https://juejin.im/post/5bf23afa6fb9a049be5d1494
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。