瀏覽器從輸入URL到界面顯示一共經歷了6個階段

1. DNS(域名)解析

2. TCP連接(三次握手)

3.?發送HTTP請求

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

5.?瀏覽器解析渲染頁面

6.?連接結束

1. DNS(域名)解析

一個網址到ip地址的轉換，找到URL對應的IP。如www.xiaochongtec.cn到22.33.55.66。

DNS查找過程中若有對應IP則停止查找：瀏覽器緩存、系統緩存、路由緩存、ISP(互聯網服務提供商) DNS緩存(DNS服務器)

2. TCP連接

拿到 ip 地址后，瀏覽器會向服務器發起TCP連接請求，通過三次握手建立TCP連接。

服務器為什么能接收到客服端發起的請求呢？

服務器監聽原理：服務器通過 socket(應用層與TCP通信中間層)，bind 和 listen準備好接收外來連接，此時服務端狀態為Listen

三次握手：

1. 客戶端向服務器發送SYN(同步)報文(SEQ=x，SYN=1)，并進入SYN_SENT狀態，等待服務器確認? (SENT：發送)

2. 服務器收到客戶端的請求，向客戶端回復一個確認消息(ACK=x+1)；服務器向客戶端發送一個SYN包(SEQ=y)建立請求連接，此時服務器進入 SYN_RECV 狀態? ?(RECV：接收)

3. 客戶端接收服務器的回復(SYN+ACK 報文)，然后客戶端也向服務器發送發送確認包，此包發送完畢客戶端和服務器進入 ESTABLISHED 狀態，完成 3 次握手。? (ACK：確認? ?ESTABLISHED ：成立)

3. 發送HTTP請求

瀏覽器向服務器發送HTTP請求。一個HTTP又分為請求和響應兩部分。

HTTP請求消息：由請求行(request line)、請求頭(header)、空行和請求數據4個部分組成。

1. 請求行：請求方法 +?URL +?HTTP協議版本 組成。如：GET /index.html HTTP/1.1

2. 請求頭：由關鍵字/值對組成。User-Agent：產生請求的瀏覽器類型。Accept：客戶端可識別的內容類型列表。Host：請求的主機名，允許多個域名同處一個IP地址，即虛擬主機

3. 空行：最后一個請求頭之后是一個空行，發送回車符和換行符，通知服務器以下不再有請求頭

4. 請求數據：請求數據不在GET方法中使用，而是在POST方法中使用。與請求數據相關的最常使用的請求頭是Content-Type(Content-Type：application/x-www-form-urlencoded)和Content-Length

HTTP響應消息：由響應行、響應頭、響應體三個部分組成。

1. 響應行：HTTP協議版本 + 狀態碼 + 描述 組成。如： HTTP/1.1 200 OK

狀態碼：由三位數字組成，第一個數字定義了響應的類別，且有五種可能取值。1xx：指示信息–表示請求已接收，繼續處理。2xx：成功–表示請求已被成功接收、理解、接受。3xx：重定向–要完成請求必須進行更進一步的操作。4xx：客戶端錯誤–請求有語法錯誤或請求無法實現。5xx：服務器端錯誤–服務器未能實現合法的請求。

2.?響應頭：與請求頭部類似，為響應報文添加了一些附加信息，描述服務器的基本信息，以及數據的描述，服務器通過這些數據的描述信息，可以通知客戶端如何處理等一會兒它回送的數據。

3.?響應體：響應體就是響應的消息體，如果是純數據就是返回純數據，如果請求的是HTML頁面，那么返回的就是HTML代碼，如果是JS就是JS代碼

HTTP特性：

1.?HTTP是無連接：無連接意味著每次只能處理一個請求，服務器處理完客戶端的請求并收到客戶端應答后斷開連接

2.?HTTP是媒體獨立的：只要客戶端和服務器知道如何處理的數據內容，任何類型的數據都可以通過HTTP發送。客戶端以及服務器指定使用適合的MIME-type內容類型

3.?HTTP是無狀態：HTTP協議是無狀態協議，表現為后續處理需要前面的信息，則它必須重傳

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

服務器在接收到請求后,解析用戶請求,知道了要調度那些資源文件,再通過相應的資源文件,處理用戶的請求和參數,并調用數據庫信息,最后講結果通過web服務器返回給瀏覽器.

5.?瀏覽器解析渲染頁面

解析過程6個步驟：解析HTML -> 創建DOM樹 -> 解析CSS形成CSS對象模型 -> DOM樹和CSS 結合構建渲染樹 ->?布局 - > 繪制 -> 顯示

渲染樹：從DOM樹的根節點開始遍歷每個可見節點，讓后對每個可見節點找到適配的CSS樣式規則并應用，DOM 樹不完全對應，display: none的元素不在渲染樹中，而visibility: hidden的元素在渲染書中。display: none在DOM 樹中

布局：對渲染樹上的每個元素，計算它的坐標，稱之為布局。包含寬高，位置，背景色等樣式信息，我們常說的脫離文檔流(可以隨意設置寬高、不設置則給根據內容適應、不再給父元素匯報寬高)，其實就是脫離渲染樹，導致脫離標準流的元素：float元素，absoulte元素，fixed元素會發生位置偏移。

繪制：根據渲染樹以及布局得到的幾何信息，通過繪制得到節點的絕對像素。

顯示：將得到的節點的絕對像素發送給GPU，展示在頁面上

回流(重排)與重繪

回流(重排)：當瀏覽器發現某個部分發生了頁面布局和幾何信息的變化，就需要倒回去重新渲染了，重新渲染，就又要經過布局計算可見節點在設備視口(viewport)內的幾何信息，以及之后的繪制和顯示將這些信息渲染在頁面上。如：DOM操作(元素添加、刪除、修改或者元素順序的改變)

重繪：改變元素外觀，但是不影響之前的位置，重新執行瀏覽器的繪制和顯示過程。如： background-color(背景色)， border-color(邊框色)， visibility(可見性)。瀏覽器會根據元素的新屬性重新繪制一次(這就是重繪，或者說重新構造樣式)，使元素呈現新的外觀。

"重繪"不一定需要"重排"，比如改變某個網頁元素的顏色，就只會觸發"重繪"，不會觸發"重排"，因為布局沒有改變。但是，"重排"必然導致"重繪"，比如改變一個網頁元素的位置，就會同時觸發"重排"和"重繪"，因為布局改變了。

display:none、visibility:hidden和overflow:hidden的區別

1.?display:none：隱藏元素，不占網頁中的任何空間，讓這個元素徹底消失(看不見也摸不著),由于會影響到網頁的空間，所以會引起兩次重排和重繪

2.??visibility:hidden：占據的空間還是存在的，該操作不會對頁面有影響，所以只會引起一次重繪。

3.?overflow:hidden：寬高把多余的那部分剪掉，會引起一次重排和重繪

4.脫離文檔流和添加回文檔這兩次回流是無可避免的，但是中間的DOM操作，則是在渲染樹之外進行的，因此不會產生任何的回流與重繪

總結

以上是生活随笔為你收集整理的html页面返回原理,浏览器输入URL到界面显示（HTML渲染）发生了什么？的全部內容，希望文章能夠幫你解決所遇到的問題。

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