【前端芝士樹】從瀏覽器搜索框輸入網址到網頁呈現發生了什麼？
這個也是在前端面試中問得比較多的一個問題了，文章篇幅有限儘可能關注一些前端開發中不太會遇到的知識點，如果想擴展的話請點擊引用文章吧，也歡迎評論，後續會繼續補充。
0. 大致流程
看圖的話更容易記一些，
下面將會基於這幾個過程進行描述。
1. 瀏覽器輸入Url
首先需要搞明白的是，域名和ip地址是不同的，域名是爲了更方便記憶ip所產生的，ip纔是服務器在網絡上的真實地址。
IP地址是用來唯一標識互聯網上計算機的邏輯地址，讓電腦之間可以相互通信，每臺連網計算機都依靠IP地址來互相區分，相互聯繫。IP地址通常指的是網絡中的主機，而域名則通常表示一個網站，一個域名可以綁定到多個ip上，多個域名也可以綁定到一個ip上。
爲了讓域名和地址能夠相互轉換，就需要對其進行映射，有兩種方式：
- 靜態映射 在瀏覽器端存儲一份域名到ip地址的映射表，只供本設備使用。
- 動態映射 利用DNS來進行域名解析，在專門的DNS服務器上配置主機到IP地址的映射。
DNS（Domain Name System，域名系統），萬維網上作爲域名和IP地址相互映射的一個分佈式數據庫，能夠使用戶更方便的訪問互聯網，而不用去記住能夠被機器直接讀取的IP數串。DNS協議運行在UDP協議之上，使用端口號53。DNS可供所有網絡上的節點使用。
1.1 域名解析 && 瀏覽器查詢ip的過程
- 瀏覽器從緩存的映射表中尋找域名對應的記錄，如果存在則直接返回IP
- 緩存中如果沒有記錄命中，則進行系統調用查詢hosts，查找用戶定義的IP映射。
- 前兩者都無效的情況下， 向路由器發送DNS查詢的請求，或者直接向用戶定義的DNS服務地址發送域名解析的請求。
DNS服務器會從根域名服務器開始遞歸搜索，從.com頂級域名服務器，到baidu的域名服務器。
2. 建立TCP連接
TCP/IP協議 / 四層模型 / 三次握手
在 TCP/IP協議組 中包含一系列用於處理數據通信的協議：
- TCP (傳輸控制協議) - 應用程序之間通信
- UDP (用戶數據包協議) - 應用程序之間的簡單通信
- IP (網際協議) - 計算機之間的通信
- ICMP (因特網消息控制協議) - 針對錯誤和狀態
- DHCP (動態主機配置協議) - 針對動態尋址
- ...
如圖所示
TCP / IP 協議組
- TCP/IP 意味着 TCP 和 IP 在一起協同工作。
- TCP 負責應用軟件（比如你的瀏覽器）和網絡軟件之間的通信。
- IP 負責計算機之間的通信。
- TCP 負責將數據分割並裝入 IP 包，然後在它們到達的時候重新組合它們。
- IP 負責將包發送至接受者。
在這其中需要着重瞭解一下的就是數據是如何進行處理的、TCP、IP以及TCP和UDP的區別。
數據處理流程
TCP三次握手
TCP與UDP的區別
- TCP 是面向連接的、可靠的流協議。流就是指不間斷的數據結構，當應用程序採用 TCP 發送消息時，雖然可以保證發送的順序，但還是猶如沒有任何間隔的數據流發送給接收端。TCP 爲提供可靠性傳輸，實行“順序控制”或“重發控制”機制。此外還具備“流控制（流量控制）”、“擁塞控制”、提高網絡利用率等衆多功能。
- UDP 是不具有可靠性的數據報協議。細微的處理它會交給上層的應用去完成。在 UDP 的情況下，雖然可以確保發送消息的大小，卻不能保證消息一定會到達。因此，應用有時會根據自己的需要進行重發處理。
- TCP 和 UDP 的優缺點無法簡單地、絕對地去做比較：TCP 用於在傳輸層有必要實現可靠傳輸的情況；而在一方面，UDP 主要用於那些對高速傳輸和實時性有較高要求的通信或廣播通信。TCP 和 UDP 應該根據應用的目的按需使用。
瀏覽器利用IP直接與網站主機通信。瀏覽器發出TCP（SYN標誌位爲1）連接請求，主機返回TCP（SYN，ACK標誌位均爲1）應答報文，瀏覽器收到應答報文發現ACK標誌位爲1，表示連接請求確認。瀏覽器返回TCP（）確認報文，主機收到確認報文，三次握手，TCP連接建立完成。
3. 服務器響應請求
在TCP連接建立完成後，瀏覽器向主機發起一個HTTP-GET方法報文請求。請求中包含訪問的URL，也就是http://www.baidu.com/ ，還有User-Agent用戶瀏覽器操作系統信息，編碼等。
3.1 常見的服務器狀態碼
1** 請求狀態
- 100 Continue 繼續，一般在發送post請求時，已發送了http、header之後服務端將返回此信息，表示確認，之後發送具體參數信息
2** 響應狀態
- 200 OK 正常返回信息
- 201 Created 請求成功並且服務器創建了新的資源
3** 資源狀態
- 301 Moved Permanently 永久重定向，請求的網頁已永久移動到新位置。
4** 網頁狀態
- 400 Bad Request 服務器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。
- 404 Not Found 找不到如何與 URI 相匹配的資源。
5** 服務器狀態
- 500 Internal Server Error 最常見的服務器端錯誤。
3.2 重定向的作用
重定向是爲了負載均衡或者導入流量，提高SEO排名。利用一個前端服務器接受請求，然後負載到不同的主機上，可以大大提高站點的業務併發處理能力；重定向也可將多個域名的訪問，集中到一個站點；由於baidu.com，www.baidu.com會被搜索引擎認爲是兩個網站，照成每個的鏈接數都會減少從而降低排名，永久重定向會將兩個地址關聯起來，搜索引擎會認爲是同一個網站，從而提高排名。
4. 瀏覽器渲染呈現
瀏覽器拿到響應的頁面代碼，將其解析呈現在用戶面前。
中間會涉及到瀏覽器的渲染步驟、JS引擎、渲染引擎、事件響應等知識點。
後續會繼續補充，歡迎收藏和點贊。
參考文章
W3School - TCP/IP 簡介
一篇文章帶你熟悉 TCP/IP 協議（網絡協議篇二）