一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼

當咱們在瀏覽器輸入URL後會在瞬間顯示頁面，雖然就這短短的一瞬間，可是中間卻通過很是複雜的處理過程，今天咱們就簡單來剖析下它們之間的主要處理過程。

1.URL

url：統一資源定位符，互聯網上的每一個文件都有一個惟一的URL，它包含的信息指出文件的位置以及瀏覽器應該怎麼處理它。它最初是由蒂姆·伯納斯·李發明用來做爲萬維網的地址，通俗的說就是我們現平常所見的網頁地址，如：www.baidu.com，那麼這個地址就是百度的URL。

統一資源定位符的標準格式以下：

協議類型:[//服務器地址[:端口號]][/資源層級UNIX文件路徑]文件名[?查詢][#片斷ID]

如下面爲例：

baike.baidu.com:80/item/url/11…

• 1.https是協議
• 2.層級URL標記符號(爲[//],固定不變)
• 3.baike.baidu.com是服務器地址（一般爲域名，有時爲IP地址）
• 4.80是端口
• 5./item/url/110640是路徑
• 6.?fr=aladdin是查詢參數
• 7.#19是錨點

2.DNS轉換

在瀏覽器輸入url後，瀏覽器並不能直接經過url找到服務器，而是要經過ip地址，

IP 地址是指互聯網協議地址，IP 地址是IP協議提供的一種統一的地址格式，它爲互聯網上的每個網絡和每一臺主機分配一個邏輯地址IP 地址是一個 32 位的二進制數，好比 127.0.0.1 爲本機 IP。

url(域名)能夠說是一個IP地址的代稱，目的是爲了便於記憶後者。例如www.baidu.com是一個域名，和IP地址220.181.115.244相對應。人們能夠直接訪問www.baidu.com來代替IP地址，而後域名系統（DNS）就會將它轉化成便於機器識別的IP地址。這樣，人們只須要記憶www.baidu.com這一串帶有特殊含義的字符，而不須要記憶沒有含義的數字。

域名系統（英語：Domain NameSystem，縮寫：DNS）是互聯網的一項服務。它做爲將域名和IP地址相互映射的一個分佈式數據庫，可以令人更方便地訪問互聯網。而不用去記住可以被機器直接讀取的IP數串。經過主機名，最終獲得該主機名對應的IP地址的過程叫作域名解析（或主機名解析），他會在DNS上記錄一條信息記錄。

• 瀏覽器會從瀏覽器自身緩存中查找是否有目標域名和對應的IP地址。

• 從本地電腦的hosts文件查找是否有存儲DNS信息。

• 從路由器的緩存DNS信息中查找。

• ISP DNS緩存查找，從網絡服務商（好比電信）的DNS緩存信息中查找。

• 經由以上幾種方法還沒查找到目標URL對應的IP的話，就會向根域名DNS服務器查找目標URL的對應IP，根域名服務器會向下級服務器轉送請求，層層下發，直至找到對應IP爲止

通過以上IP尋址的過程，目標URL查找到對應的IP地址以後，經過IP地址查找到對應的服務器，瀏覽器將用戶發起的http請求發送給服務器。下一步就到了服務器處理階段的工做。

3.http服務器請求

HTTP 請求分爲三個部分：TCP 三次握手、http 請求響應信息、關閉 TCP 鏈接。

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

第一次

第一次握手：創建鏈接時，客戶端（瀏覽器）發送syn包（syn=j）到服務器，並進入SYN_SENT狀態，等待服務器確認；（瀏覽器：我要鏈接你啦） SYN：同步序列編號（Synchronize Sequence Numbers）。

第二次

第二次握手：服務器收到syn包，必須確認客戶的SYN（ack=j+1），同時本身也發送一個SYN包（syn=k），即SYN+ACK包，此時服務器進入SYN_RECV狀態；（服務器收到請求，並回復：贊成你鏈接）

第三次

第三次握手：客戶端（瀏覽器）收到服務器的SYN+ACK包，向服務器發送確認包ACK(ack=k+1），此包發送完畢，客戶端和服務器進入ESTABLISHED（TCP鏈接成功）狀態，完成三次握手。（瀏覽器回覆：收到你的回覆，）

三次握手結束後，開始發送 HTTP 請求報文。

請求的內容以下：

HTTP/1.1協議中共定義了八種方法（也叫「動做」） GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONS、TRACE。其中較爲經常使用的又GET、POST、PUT方法；

請求的格式：

1 動詞 路徑 協議/版本
2 Key1: value1
2 Key2: value2
2 Key3: value3
2 Content-Type: application/x-www-form-urlencoded
2 Host: www.baidu.com
2 User-Agent: curl/7.54.0
3 
4 要上傳的數據
請求最多包含四部分，最少包含三部分。（也就是說第四部分能夠爲空）
第三部分永遠都是一個回車（\n）
動詞有 GET POST PUT PATCH DELETE HEAD OPTIONS 等
這裏的路徑包括「查詢參數」，但不包括「錨點」
若是你沒有寫路徑，那麼路徑默認爲 /
第 2 部分中的 Content-Type 標註了第 4 部分的格式
複製代碼

請求了以後，應該都能獲得一個響應，除非斷網了，或者服務器宕機了。接下來服務器開始處理請求並返回 HTTP 報文

4.服務器處理請求

每臺服務器上都會安裝處理請求的應用——web server（常見的web server產品有apache、nginx、IIS或Lighttpd等）。

web server 擔任管控的角色，對於不一樣用戶發送的請求，會結合配置文件，把不一樣請求委託給服務器上處理對應請求的程序進行處理（例如CGI腳本，JSP腳本，servlets，ASP腳本，服務器端JavaScript，或者一些其它的服務器端技術等），而後返回後臺程序處理產生的結果做爲響應。

5.網站後臺處理階段

網站處理，就是實際後臺處理的工做。後臺開發如今有不少框架，但大部分都仍是按照MVC設計模式進行搭建的。

MVC是三個單詞的首字母縮寫，它們是Model（模型）、View（視圖）和Controller（控制）。

這個模式認爲，程序不論簡單或複雜，從結構上看，均可以分紅三層。

1）最上面的一層，是直接面向最終用戶的"視圖層"（View）。它是提供給用戶的操做界面，是程序的外殼。

2**）最底下的一層，是核心的"數據層"（Model），也就是程序須要操做的數據或信息。在 MVC 的三個部件中，模型擁有最多的處理任務。一個模型能爲多個視圖提供數據。**

3）中間的一層，就是"控制層"（Controller），它負責根據用戶從"視圖層"輸入的指令，選取"數據層"中的數據，而後對其進行相應的操做，產生最終結果，控制器屬於管理者角色，從視圖接收請求並決定調用哪一個模型構件去處理請求，而後再肯定用哪一個視圖來顯示模型處理返回的數據。

總結而言，首先控制器接收用戶的請求，並決定應該調用哪一個模型來進行處理，而後模型用業務邏輯來處理用戶的請求並返回數據，最後控制器用相應的視圖格式化模型返回html字符串給瀏覽器，瀏覽器呈現網頁給用戶。 返回相應報文內容以下：

6.瀏覽器解析渲染頁面

經過後臺處理返回的html字符串結果會被瀏覽器讀取解析，對應就是html頁面加載、解析、渲染的工做。

一、加載

瀏覽器對一個html頁面的加載順序是從上而下的，並在加載過程並行進行解析渲染處理。在這個過程當中遇到link標籤、image標籤、script標籤時，瀏覽器會再次向服務器發送請求獲取css文件、圖片資源、js文件，並執行js代碼，同步進行加載解析。

二、解析、渲染

解析的過程，其實就是生成解析樹，即dom樹。dom樹是由dom元素及屬性節點組成，加上css解析的樣式對象和js解析後的動做實現。而渲染，就是將DOM樹進行可視化表示。下一步就來到了繪製網頁的工做階段。

6、繪製頁面 瀏覽器經過上面步驟計算獲得渲染樹，是DOM樹的可視化表示，構建渲染樹使頁面以正確的順序繪製出來，遵循必定的渲染規則，通過一系列的渲染工做，實現網站頁面的繪製，由此最終完成了頁面展現。

7.斷開連接

當數據傳送完畢，須要斷開 tcp 鏈接，此時發起 tcp 四次揮手。

1.TCP客戶端發送一個FIN，用來關閉客戶到服務器的數據傳送。(瀏覽器發起通知，請求已經發送完畢，你準備關閉吧)

2.服務器收到這個FIN，它發回一個ACK，確認序號爲收到的序號加1。和SYN同樣，一個FIN將佔用一個序號。(服務器發起通知，請求已經已經接收完畢，你準備關閉吧)

3.服務器關閉客戶端的鏈接，發送一個FIN給客戶端。(服務器發起通知，響應報文已經發送完畢，你準備關閉吧)

4.客戶端發回ACK報文確認，並將確認序號設置爲收到序號加1。(瀏覽器發起通知，我準備關閉了，你也準備關閉吧)

以上基本就是個頁面從輸入 URL 到頁面加載顯示完成，發生的全過程，固然還能夠在細化一些，不過這些知識對於前端來講已經足夠了，有興趣的同窗能夠自行深究。

結尾

文章參考多篇該類主題的文章以及維基百科，本人進行概括整理，刪繁就簡，若有不足錯誤之處，歡迎指出。