【前端芝士樹】從瀏覽器搜索框輸入網址到網頁呈現發生了什麼？

【前端芝士樹】從瀏覽器搜索框輸入網址到網頁呈現發生了什麼？

這個也是在前端面試中問得比較多的一個問題了，文章篇幅有限盡量關注一些前端開發中不太會遇到的知識點，若是想擴展的話請點擊引用文章吧，也歡迎評論，後續會繼續補充。

0. 大體流程

看圖的話更容易記一些，
下面將會基於這幾個過程進行描述。

1. 瀏覽器輸入Url

首先須要搞明白的是，域名和ip地址是不一樣的，域名是爲了更方便記憶ip所產生的，ip纔是服務器在網絡上的真實地址。

IP地址是用來惟一標識互聯網上計算機的邏輯地址，讓電腦之間能夠相互通訊，每臺連網計算機都依靠IP地址來互相區分，相互聯繫。

IP地址一般指的是網絡中的主機，而域名則一般表示一個網站，一個域名能夠綁定到多個ip上，多個域名也能夠綁定到一個ip上。

爲了讓域名和地址可以相互轉換，就須要對其進行映射，有兩種方式：

1. 靜態映射 在瀏覽器端存儲一份域名到ip地址的映射表，只供本設備使用。
2. 動態映射 利用DNS來進行域名解析，在專門的DNS服務器上配置主機到IP地址的映射。

DNS（Domain Name System，域名系統），萬維網上做爲域名和IP地址相互映射的一個分佈式數據庫，可以使用戶更方便的訪問互聯網，而不用去記住可以被機器直接讀取的IP數串。DNS協議運行在UDP協議之上，使用端口號53。DNS可供全部網絡上的節點使用。

1.1 域名解析 && 瀏覽器查詢ip的過程

1. 瀏覽器從緩存的映射表中尋找域名對應的記錄，若是存在則直接返回IP
2. 緩存中若是沒有記錄命中，則進行系統調用查詢hosts，查找用戶定義的IP映射。
3. 前二者都無效的狀況下， 向路由器發送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 協議（網絡協議篇二）