輸入URL後發生了什麼
當我們在瀏覽器的位址列中輸入URL後，按下【Enter】鍵，Web頁面隨即被開啟。在這一個過程中發生了什麼？事實上，這一問題屬於一道非常經典的面試題，它考察的範圍非常廣，每個知識點又可以細挖得非常深。網上已有大量的相關文章。我在此一方面是用我自己所掌握的知識，所能理解的方式來解答這個問題，另一方面也是對讀了《圖解HTTP》相關內容的總結。
初步的概念
首先，對於這個問題要先有一個初步的概念。即該問題可以理解為，①輸入URL後，②瀏覽器向伺服器發起了一個請求，傳輸了一些資料。③伺服器接收到請求後，④作出了相應的處理，然後返回資料到瀏覽器。⑤瀏覽器再做相應的處理，最後將頁面展現在我們面前。這五個部分，是
1. 瀏覽器如何接收到輸入URL的訊號
首先，當我們在鍵盤上敲擊某個鍵時，鍵盤內的處理器會先對鍵矩陣進行分析，然後將資料傳送到計算機。有很多方式可以完成這一過程，比如USB鍵盤會通過USB纜線傳送資料，無線鍵盤可以通過藍芽傳送資料。膝上型電腦通過內部的介面傳送資料。
無論何種方式，來自鍵盤的訊號都會由計算機的鍵盤控制器（一種積體電路）進行處理，然後傳送給作業系統。作業系統會分析，這些資料是否為系統命令，若不是，則將資料傳給應用程式。
應用程式會分析這些資料是否為命令，如果不是命令，則會將資料作為內容接受。比如於在瀏覽器的位址列中輸入URL。若不接受這些資料，則將其忽略。
到此，我們敲擊鍵盤，輸入URL，按下【Enter】，瀏覽器接收到URL，並且接收到使用者按下了回車鍵，這一部分也就結束了。
2. 瀏覽器如何向網絡卡傳送資料
在我們輸入URL的過程中，瀏覽器可能會進行一些預處理。比如使用者根據輸入的字元判斷想要輸入的網站。當按下回車鍵後，瀏覽器會對URL進行檢查，是否合法，如果不合法會將輸入內容傳給預設的搜尋引擎。
到此，瀏覽器開始正式解析URL了。在此之前，我們要先明白，什麼是URL？
URL簡介
URL（統一資源定位符 英文：Uniform / Universal Resource Locator），也就是我們所理解的網址。它有五個基本元素：
- 傳送協議
- 伺服器（通常為域名，由時為IP地址）
- 埠號（比如“:80”）
- 路徑
- 查詢
http，是協議；zh.wikipedia.org，是伺服器；80，是伺服器上的網路埠號；/w/index.php，是路徑；title=Special:%E9%9A%8F%E6%9C%BA%E9%A1%B5%E9%9D%A2&printable=yes，是詢問。
大多數網頁瀏覽器不要求使用者輸入網頁“http://”的部分，因為絕大多數網頁內容是超文字傳輸協議檔案。同樣，“80”是超文字傳輸協議檔案的常用埠號，因此一般也不必寫明。一般來說使用者只要鍵入統一資源定位符的一部分（zh.wikipedia.org/wiki/Special:%E9%9A%8F%E6%9C%BA%E9%A1%B5%E9%9D%A2）就可以了。 來源於維基百科
DNS（Domain Name System，域名系統）查詢
隨後，瀏覽器會根據URL找到相應的IP地址，也就是DNS查詢。其查詢過程分幾個步驟：
- 查詢瀏覽器快取。不同的瀏覽器儲存DNS記錄的時間是不同的，一般在30秒到2分鐘（要檢視 Chrome 當中的快取， 開啟 chrome://net-internals/#dns）。
- 查詢系統快取。若瀏覽器快取中沒找到，瀏覽器則會做系統呼叫（windows裡是gethostbyname）進行查詢。它會查詢本地Host檔案，Host的位置因系統而異。
- 若Host檔案也沒有，則向DNS伺服器發出查詢請求，DNS伺服器一般為路由器或 ISP 的快取 DNS 伺服器。
- ISP的快取DNS伺服器進行遞迴查詢，從根域名伺服器查到頂級域名伺服器再查到許可權域名伺服器。最後得到目標域名的IP地址。
到此已經獲得了目標域名的IP地址。接下來就是通過 Socket 傳送資料
通過 Socket 傳送資料
通過Socket API傳送資料，可以選擇TCP或UDP協議，一般來說，HTTP常用的是TCP。TCP和UDP的區別在於：
- UDP（User Data Protocol，使用者資料報協議）是面向非連線的協議，它不與對方建立連線，直接將資料包傳送過去。一般適用於只傳送少量資料，對可靠性要求不高的情況下。
- TCP（Transmission Control Protocol，傳輸控制協議）是基於連線的協議。採用了“三次握手（three-way handshaking）”策略。適用於資料量大，對可靠性要求高的情況。
三次握手
三次握手是為了確保資料準確無誤的送達到目的地而採用的策略。傳送端首先發送一個帶SYN標誌的資料包給對方，接收端收到後，回傳一個帶有SYN/ACK的標誌的資料包以示傳達確認資訊。最後，傳送端再回傳一個帶ACK標誌的資料包，代表“握手”結束。若在握手中某個階段莫名中斷，TCP協議會再次以相同的順序傳送相同的資料包。
——《圖解HTTP》
瀏覽器再得到URL後，呼叫Socket，使用TCP協議，HTTP請求會被封裝，加入本地埠，目標埠等資訊。IP地址是在IP協議中被封裝的。但光有IP地址是不夠的，因為裝置是可以移動的，IP地址並不與裝置繫結。所以還有一個MAC要被封裝，每個網絡卡的MAC地址都是固定且唯一的。這一系列過程就關係到了“TCP/IP協議族”的一個重要的特點：分層。
TCP/IP的分層管理
TCP/IP協議族包含了很多協議，按層次分有四層：應用層、傳輸層、網路層、資料鏈路層。
- 應用層：包含了各種通用的應用服務，比如 FTP（File Transfer Protocol，檔案傳輸協議）、DNS、HTTP等。
- 傳輸層：提供網路中兩臺計算機之間的資料傳輸，比如TCP、UDP。
- 網路層：處理在網路上流動的資料包，該層規定了傳輸路線，資料包通過怎樣的路徑傳送到對方的計算機中。比如 IP。
- 資料鏈路層：連線網路的硬體部分，包括網絡卡，光纖等等硬體裝置
Paste_Image.png
——《圖解HTTP》
利用TCP/IP通訊時，是通過分層順序和對方通訊的。傳送端從應用層往鏈路層，接收端從鏈路層往應用層。這時，我們在回過頭來看傳送HTTP請求的過程，又有了一個更清晰的概念，即：
- 客戶端在應用層傳送HTTP請求
- 在傳輸層（TCP協議）對HTTP請求進行封裝，加入了埠號等資訊
- 在網路層（IP協議）增加了IP地址
- 在鏈路層加入了網絡卡的MAC地址 到此，一個發向對方的請求就封裝好了，進入下一部分
3. 資料是如何從本機網絡卡傳送到伺服器的
傳輸的方式一般有三種
- WIFI
- 蜂窩資料網路
- 乙太網 有些情況下，調變解調器將數字訊號轉換成模擬訊號，另一個調變解調器再講模擬訊號轉換成數字訊號，傳送送給下一個網路節點。有些情況下，資料就一直是數字訊號，被傳送給下一個網路節點。無論哪種傳輸的方式，資料最終會到達伺服器的IDC內網，通過交換機到達伺服器的網絡卡。
4. 伺服器如何處理資料並返回資料
事實上，在進入伺服器之前，可能還會先經過負責負載均衡的機器，其目的為將請求合理地分配到多個伺服器上，有很多實現方式，比如LVS，反向代理等。
在經過了負載均衡後，請求真正地到了伺服器的Web Server，比如 Apache，Node.JS等。就像之前所說的，請求從鏈路層到應用層，此時，伺服器才算真正接收到了客戶端發來的HTTP請求。
HTTP請求
HTTP報文分為三個部分
- 報文首部
- 空行（CR+LF）
- 報文主體
HTTP報文分為請求報文和響應報文
Web Server首先會接收一個請求報文
對於請求報文，其結構為
Paste_Image.png
——《圖解HTTP》
例子
Paste_Image.png
通常，不一定要有報文主體
——《圖解HTTP》
Web Server會閱讀請求和他的一些引數和cookies，然後會有相應的操作，比如更新資料，儲存資料於資料庫中等等。然後，Web Server會生成一個HTTP響應。 對於響應報文，其結構為
Paste_Image.png
——《圖解HTTP》
例子
Paste_Image.png
——《圖解HTTP》
- 請求行：包含請求的方法（GET，POST，HEAD，PUT，DELETE，CONNECT，OPTIONS, 或者 TRACE），請求URI和HTTP版本。
- 狀態行：包含表明響應結果的狀態碼，原因短語和HTTP版本。
- 首部欄位：包含表示請求和響應的各種條件和屬性的各類首部 一般有四種首部，分別是通用首部，請求首部，響應首部和實體首部。
- 其他：可能包含HTTP的RFC裡未定義的首部（Cookie）。
與伺服器互動的HTTP方法
有四種最基本的方法：GET，POST，PUT，DELETE，對應著“查”，“改”，“增”，“刪”四個操作。
-
GET和POST的區別
-
GET用於獲取資源，POST用於修改資源，這是本質區別
-
GET請求的資料在URL裡，也就是請求行中。POST請求的資料在報文主體中。
-
GET請求的資料明文出現，不安全。
-
GET請求的資料會受URL長度的限制（不是HTTP對其的限制，多是瀏覽器的限制）。POST的資料理論上不受限制，但Web Server會對提交的資料大小進行限制。
-
PUT和POST的區別 POST是作用在一個集合資源上（/uri），PUT是作用在一個具體資源上（/uri/xxx）。即若能在客戶端確定uri，就用PUT，若要在服務端確定，就用POST。
-
GET是安全且冪等的，安全意味著不會修改資源，冪等意味著多次輸入同一URL，得到的結果都是一樣的。PUT，DELETE都是冪等的。POST既不安全，也不冪等。】
狀態碼的類別
狀態碼的作用是伺服器返回響應時，描述響應的結果的數字和字串。他由3位數字和原因短語組成。例如 200 OK。數字的第一位表明了響應的類別，有五種：
| 類別 | 原因短語 | |
|---|---|---|
| 1XX | Informational（資訊性狀態碼） | 接收的請求正在處理 |
| 2XX | Success（成功狀態碼） | 請求正常處理完畢 |
| 3XX | Redirection（重定向狀態碼） | 需要進行附加操作以完成請求 |
| 4XX | Client Error（客戶端錯誤狀態碼） | 伺服器無法處理請求 |
| 5XX | Server Error（伺服器錯誤狀態碼） | 伺服器處理請求出錯 |
5. 瀏覽器如何處理伺服器的響應
HTTP在傳輸資料時，可以直接按照原樣傳，也可以進行編碼。
報文和實體
- 報文：HTTP通訊中的基本單位，由8位組位元組流組成，通過HTTP通訊傳輸。
- 實體：作為請求和響應的有效載荷資料被傳輸，內容由實體首部和實體主體組成。
- 報文主體和實體主體在一般情況下相等，但當傳輸中進行編碼操作時，實體主體的內容發生變化，導致它和報文主體產生差異
——《圖解HTTP》
內容編碼是應用在實體主體的編碼格式，目的是壓縮實體資訊，被壓縮的實體資訊由客戶端接收並解碼。常用的編碼有 gzip，compress，deflate，identity（不編碼）。
瀏覽器的主要構成
- 使用者介面（User Interface）
- 瀏覽器引擎（Browser engine）
- 渲染引擎（Rendering engine）
- 網路（Networking）
- UI後端（UI Backend）
- JS直譯器（JavaScript Interpreter）
- 資料儲存（Data Persistence）
瀏覽器的渲染引擎從網路層獲得文件後，文件會被分成8kb的分塊傳輸，在取得內容後，開始進行解析。
解析HTML以構建DOM樹==>構建Render樹==>佈局Render樹==>繪製Render樹
渲染引擎一邊解析HTML，一邊將標籤用來構建DOM樹。當他解析到CSS檔案或<style>時，它又會開始解析這些樣式，隨即利用這些樣式和已知的html構建Render樹。在構建Render樹時，渲染引擎還會開始佈局Render樹，確定每個節點的座標。最後由UI後端完成繪製Render樹。值得注意的是，渲染引擎並不是全部解析完HTML，再構建DOM樹，構建和佈局Render樹的，這些都是逐步完成的。他會一邊在下載文件，一邊在解析HTML，一邊在構建DOM樹，一邊在構建和佈局Render樹。解析一部分，就顯示一部分。這是為了更好的使用者體驗。
當解析到需要獲取其他地址的標籤如<img>時，瀏覽器又會發起一個HTTP請求，進行之前提到過的DNS查詢等等一系列操作。但是對於這種靜態檔案，很可能在瀏覽器快取中就有，不需要和伺服器進行互動。
最後，會使用CPU或GPU完成渲染，頁面也就這樣展現在我們面前了
作者：飢人谷_汲汲 連結：https://www.jianshu.com/p/5d750867897a 來源：簡書 簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。