作者 | Jake Zhang
鏈接 | https://juejin.im/post/5e92f11b6fb9a03c46493880

在寫這篇文章之前本想著這個知識點涉及知識點太多太雜，找一篇大牛寫的看看就算了，但是看了大概七八篇后，內心更糾結了——🙃🙃🙃真的好雜。。。記憶點找不到了，搞的心里亂亂的，大概是糾結癥犯了。

所以還是動手總結一下，讓自己有個可以抓取的記憶點，也讓自己對這個知識點有個淺顯的認知。

本文旨在講述發生的流程，如想深究的可自行百度哦~，其中穿插的知識點及概念我會放到小框里或者貼參考鏈接。

先來個流程總述：

• DNS解析：將域名解析成IP地址
• TCP連接：TCP三次握手
• 發送HTTP請求
• 服務器處理請求并返回HTTP報文
• 瀏覽器解析渲染頁面
• 連接結束：TCP四次揮手

1、DNS解析

在瀏覽器輸入URL后，首先要經過域名解析。瀏覽器通過向 DNS 服務器發送域名，DNS 服務器查詢到與域名相對應的 IP 地址，然后返回給瀏覽器，瀏覽器再將 IP 地址打在協議上，同時請求參數也會在協議搭載，然后一并發送給對應的服務器。

1.什么是URLURL(Uniform Resource Locator)，統一資源定位符，用于定位互聯網上資源，俗稱網址。比如 http://www.w3school.com.cn/ht...，遵守以下的語法規則：`scheme://host.domain:port/path/filename`各部分解釋如下：scheme：定義因特網服務的類型。常見的協議有 http、https、ftp、file，其中最常見的類型是 http，而 https 則是進行加密的網絡傳輸。host：定義域主機(http 的默認主機是 www)domain：定義因特網域名，比如 w3school.com.cnport：定義主機上的端口號(http 的默認端口號是 80)path：定義服務器上的路徑(如果省略，則文檔必須位于網站的根目錄中)。filename：定義文檔/資源的名稱2. 什么是DNSDNS(domain name system，域名系統)：因特網上域名和IP地址相互映射的分布式數據庫；簡單理解就是域名與IP地址的對照表，因為域名(如：www.google.com)對于我們而言，更便于記憶，但是機器卻不擅長這種表達方式，因此需要將域名轉換為IP地址，以便于機器識別， 這便有了DNS。3. 根域名服務器根服務器是架設互聯網的必須設施，管理互聯網的主目錄，全球共有13套根域名服務器4. 遞歸查詢客戶端主機向本地域名服務器的查詢是遞歸查詢；所謂遞歸查詢：客戶端主機查詢的域名地址無法在本地域名服務器中找到，因此本地域名服務器就以DNS客戶端的身份向其他根域名服務器發起請求，進行查詢，而不是讓客戶端主機去一直查詢；遞歸查詢的結果要么是返回的IP地址，要么是報錯，表示無法查詢到地址；5. 迭代查詢本地域名服務器向根服務器、頂級域名服務器和主機域名服務器發起的查詢請求就是迭代的過程，如：本地域名服務器向根服務器發起查詢請求，根服務器中會告訴本地域名服務器：”我這里沒有你要找的內容，你去頂級域名服務器上找吧“，并將頂級域名服務器的地址返回給本地域名服務器，本地域名服務器接收到后，繼續向頂級域名服務器發送請求；頂級域名服務器要么返回ip地址，要么告訴本地域名服務器下一步要向哪個權限域名服務器發送請求，直到找到ip地址或找不到ip返回報錯信息，然后信息返回給客戶端主機；下圖給出了這兩種查詢的差別遞歸過程：主機→本地DNS服務器→其他DNS服務器(如：我要找一個蘋果吃，找到了A，問A有沒有，A說我幫你去找B，B可能有，果真B有，然后B將蘋果給了A，A再將蘋果給我，這就是遞歸)迭代過程：本地DNS服務器→根服務器，本地DNS服務器→頂級域名服務器，本地DNS服務器→權限域名服務器；(如：我要找一個蘋果，找到了A，A說我也沒有，B可能有，你去找B吧；我又找B，B說我也沒有，你去找C吧，我又去找C，終于找到了蘋果，這就是迭代的過程)

2、TCP連接：TCP三次握手

在客戶端發送數據之前會發起 TCP 三次握手用以同步客戶端和服務端的序列號和確認號，并交換 TCP 窗口大小信息。

說明： Ack：應答 Fin：結束; 結束會話 Seq：一個數據段的第一個序列號 SYN：同步; 表示開始會話請求

• 第一次握手：客戶端A將標志位SYN置為1,隨機產生一個值為seq=X(X的取值范圍為=1234567)的數據包到服務器，客戶端A進入SYN_SENT狀態，等待服務端B確認(第一次握手，由瀏覽器發起，告訴服務器我要發送請求了)；
• 第二次握手：服務端B收到數據包后由標志位SYN=1知道客戶端A請求建立連接，服務端B將標志位SYN和ACK都置為1，ack=X+1，隨機產生一個值seq=Y，并將該數據包發送給客戶端A以確認連接請求，服務端B進入SYN_RCVD狀態(第二次握手，由服務器發起，告訴瀏覽器我準備接受了，你趕緊發送吧)。
• 第三次握手：客戶端A收到確認后，檢查ack是否為X+1，ACK是否為1，如果正確則將標志位ACK置為1，ack=Y+1，并將該數據包發送給服務端B，服務端B檢查ack是否為Y+1，ACK是否為1，如果正確則連接建立成功，客戶端A和服務端B進入ESTABLISHED狀態，完成三次握手，隨后客戶端A與服務端B之間可以開始傳輸數據了(第三次握手，由瀏覽器發送，告訴服務器，我馬上就發了，準備接受吧)。

為什需要三次握手？計算機網絡》第四版中講“三次握手”的目的是“為了防止已失效的連接請求報文段突然又傳送到了服務端，因而產生錯誤”。

書中的例子是這樣的，“已失效的連接請求報文段”的產生在這樣一種情況下：client發出的第一個連接請求報文段并沒有丟失，而是在某個網絡結點長時間的滯留了，以致延誤到連接釋放以后的某個時間才到達server。

本來這是一個早已失效的報文段。但server收到此失效的連接請求報文段后，就誤認為是client再次發出的一個新的連接請求。

于是就向client發出確認報文段，同意建立連接。假設不采用“三次握手”，那么只要server發出確認，新的連接就建立了。

由于現在client并沒有發出建立連接的請求，因此不會理睬server的確認，也不會向server發送數據。

但server卻以為新的運輸連接已經建立，并一直等待client發來數據。這樣，server的很多資源就白白浪費掉了。

采用“三次握手”的辦法可以防止上述現象發生。例如剛才那種情況，client不會向server的確認發出確認。server由于收不到確認，就知道client并沒有要求建立連接。”

主要目的防止server端一直等待，浪費資源。

3、瀏覽器向web服務器發送HTTP請求

TCP三次握手之后，開始發送HTTP請求報文至服務器(關于HTTP請求報文詳解，我單獨寫了一篇?傳送門

HTTP請求報文格式：請求行+請求頭+空行+消息體，請求行包括請求方式(GET/POST/DELETE/PUT)、請求資源路徑(URL)、HTTP版本號；

4、服務器處理請求并返回HTTP報文

服務器收到請求后會發出應答，即響應數據。HTTP響應與HTTP請求相似， HTTP響應報文格式：狀態行+響應頭+空行+消息體，狀態行包括HTTP版本號、狀態碼、狀態說明。

5、瀏覽器解析渲染頁面

瀏覽器拿到響應文本后，解析HTML代碼，請求js，css等資源，最后進行頁面渲染，呈現給用戶。頁面渲染一般分為以下幾個步驟：

(1)根據HTML文件解析出DOM Tree

(2)根據CSS解析出 CSSOM Tree(CSS規則樹)

(3)將 DOM Tree 和 CSSOM Tree合并，構建Render tree(渲染樹)

(4)reflow(重排)：根據Render tree進行節點信息計算(Layout)

(5)repaint(重繪)：根據計算好的信息繪制整個頁面(Painting)

6、TCP四次揮手

當數據傳輸完畢，需要斷開TCP連接，此時發起tcp四次揮手

1、客戶端向服務端發送報文，Fin、Ack、Seq，表示已經沒有數據傳輸了。并進入 FIN_WAIT_1 狀態。(由瀏覽器告訴服務器，我請求報文發送完了，你準備關閉吧)

2、服務端向客戶端發送報文，Ack、Seq，表示同意關閉請求。此時主機發起方進入 FIN_WAIT_2 狀態。(由服務器告訴瀏覽器，我請求報文接受完了，我準備關閉了，你也準備吧)

3、服務端向客戶端發送報文段，Fin、Ack、Seq，請求關閉連接。并進入 LAST_ACK 狀態。(由服務器告訴瀏覽器，我響應報文發送完了，你準備關閉吧)

4、客戶端向服務端發送報文段，Ack、Seq。然后進入等待 TIME_WAIT 狀態。被動方收到發起方的報文段以后關閉連接。發起方等待一定時間未收到回復，則正常關閉。(由瀏覽器告訴服務器，我響應報文接受完了，我準備關閉了，你也準備吧)

簡單說就是：

1、A——>B ：A告訴B：“我發完了”；2、B——>A：B告訴A：“好的，我知道你發完了”3、B——>A：B告訴A：“我收完了”；4、A——>B：A告訴B：“好的，我知道你發收完了

總結

以上基本就是在地址欄從輸入 URL 到頁面加載顯示發生的全過程，當然還有很多的細節沒有寫進去，不過這些知識對于前端來說已經足夠了，有興趣的小伙伴可以自行深究。

最后，小生乃前端小白一枚，寫文章的最初衷是為了讓自己對該知識點有更深刻的印象和理解，寫的東西也很小白，文中如有不對，歡迎指正~ ?然后就是希望看完的朋友可以點個喜歡，也可以關注一波~ ?我會持續輸出！

總結

以上是生活随笔為你收集整理的url主机域名可以省略_从输入url到页面完成加载发生了什么的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。