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

1. DNS(域名)解析

2. TCP連接(三次握手)

3.?發(fā)送HTTP請求

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

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

6.?連接結(jié)束

1. DNS(域名)解析

一個網(wǎng)址到ip地址的轉(zhuǎn)換，找到URL對應(yīng)的IP。如www.xiaochongtec.cn到22.33.55.66。

DNS查找過程中若有對應(yīng)IP則停止查找：瀏覽器緩存、系統(tǒng)緩存、路由緩存、ISP(互聯(lián)網(wǎng)服務(wù)提供商) DNS緩存(DNS服務(wù)器)

2. TCP連接

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

服務(wù)器為什么能接收到客服端發(fā)起的請求呢？

服務(wù)器監(jiān)聽原理：服務(wù)器通過 socket(應(yīng)用層與TCP通信中間層)，bind 和 listen準(zhǔn)備好接收外來連接，此時服務(wù)端狀態(tài)為Listen

三次握手：

1. 客戶端向服務(wù)器發(fā)送SYN(同步)報文(SEQ=x，SYN=1)，并進(jìn)入SYN_SENT狀態(tài)，等待服務(wù)器確認(rèn)? (SENT：發(fā)送)

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

3. 客戶端接收服務(wù)器的回復(fù)(SYN+ACK 報文)，然后客戶端也向服務(wù)器發(fā)送發(fā)送確認(rèn)包，此包發(fā)送完畢客戶端和服務(wù)器進(jìn)入 ESTABLISHED 狀態(tài)，完成 3 次握手。? (ACK：確認(rèn)? ?ESTABLISHED ：成立)

3. 發(fā)送HTTP請求

瀏覽器向服務(wù)器發(fā)送HTTP請求。一個HTTP又分為請求和響應(yīng)兩部分。

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

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

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

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

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

HTTP響應(yīng)消息：由響應(yīng)行、響應(yīng)頭、響應(yīng)體三個部分組成。

1. 響應(yīng)行：HTTP協(xié)議版本 + 狀態(tài)碼 + 描述 組成。如： HTTP/1.1 200 OK

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

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

3.?響應(yīng)體：響應(yīng)體就是響應(yīng)的消息體，如果是純數(shù)據(jù)就是返回純數(shù)據(jù)，如果請求的是HTML頁面，那么返回的就是HTML代碼，如果是JS就是JS代碼

HTTP特性：

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

2.?HTTP是媒體獨(dú)立的：只要客戶端和服務(wù)器知道如何處理的數(shù)據(jù)內(nèi)容，任何類型的數(shù)據(jù)都可以通過HTTP發(fā)送?？蛻舳艘约胺?wù)器指定使用適合的MIME-type內(nèi)容類型

3.?HTTP是無狀態(tài)：HTTP協(xié)議是無狀態(tài)協(xié)議，表現(xiàn)為后續(xù)處理需要前面的信息，則它必須重傳

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

服務(wù)器在接收到請求后,解析用戶請求,知道了要調(diào)度那些資源文件,再通過相應(yīng)的資源文件,處理用戶的請求和參數(shù),并調(diào)用數(shù)據(jù)庫信息,最后講結(jié)果通過web服務(wù)器返回給瀏覽器.

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

解析過程6個步驟：解析HTML -> 創(chuàng)建DOM樹 -> 解析CSS形成CSS對象模型 -> DOM樹和CSS 結(jié)合構(gòu)建渲染樹 ->?布局 - > 繪制 -> 顯示

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

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

繪制：根據(jù)渲染樹以及布局得到的幾何信息，通過繪制得到節(jié)點(diǎn)的絕對像素。

顯示：將得到的節(jié)點(diǎn)的絕對像素發(fā)送給GPU，展示在頁面上

回流(重排)與重繪

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

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

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

display:none、visibility:hidden和overflow:hidden的區(qū)別

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。