從URL輸入到頁面展現到底發生什麼?

2021-10-08 16:58:27 字數 3229 閱讀 4411

三、tcp 三次握手

四、傳送 http 請求

五、伺服器處理請求並返回 http 報文

六、瀏覽器解析渲染頁面

七、斷開連線

參考文章

總體來說分為以下幾個過程:

url(uniform resource locator),統一資源定位符,用於定位網際網路上資源,俗稱**。

比如 遵守以下的語法規則:

scheme:

各部分解釋如下:

在瀏覽器輸入**後,首先要經過網域名稱解析,因為瀏覽器並不能直接通過網域名稱找到對應的伺服器,而是要通過 ip 位址。大家這裡或許會有個疑問----計算機既可以被賦予 ip 位址,也可以被賦予主機名和網域名稱。比如www.hackr.jp。那怎麼不一開始就賦予個 ip 位址?這樣就可以省去解析麻煩。我們先來了解下什麼是 ip 位址

1.ip 位址

ip 位址是指網際網路協議位址,是ip address的縮寫。ip 位址是 ip 協議提供的一種統一的位址格式,它為網際網路上的每乙個網路和每一台主機分配乙個邏輯位址,以此來遮蔽實體地址的差異。ip 位址是乙個 32 位的二進位制數,比如 127.0.0.1 為本機 ip。

網域名稱就相當於 ip 位址喬裝打扮的偽裝者,帶著一副面具。它的作用就是便於記憶和溝通的一組伺服器的位址。使用者通常使用主機名或網域名稱來訪問對方的計算機,而不是直接通過 ip 位址訪問。因為與 ip 位址的一組純數字相比,用字母配合數字的表示形式來指定計算機名更符合人類的記憶習慣。但要讓計算機去理解名稱,相對而言就變得困難了。因為計算機更擅長處理一長串數字。為了解決上述的問題,dns 服務應運而生。

2.什麼是網域名稱解析

dns 協議提供通過網域名稱查詢 ip 位址,或逆向從 ip 位址反查網域名稱的服務。dns 是乙個網路伺服器,我們的網域名稱解析簡單來說就是在 dns 上記錄一條資訊記錄。

例如 baidu.com 220.114.23.56(伺服器外網ip位址)80(伺服器端口號)

3. 瀏覽器如何通過網域名稱去查詢 url 對應的 ip 呢

4. 小結

瀏覽器通過向 dns 伺服器傳送網域名稱,dns 伺服器查詢到與網域名稱相對應的 ip 位址,然後返回給瀏覽器,瀏覽器再將 ip 位址打在協議上,同時請求引數也會在協議搭載,然後一併傳送給對應的伺服器。接下來介紹向伺服器傳送 http 請求階段,http 請求分為三個部分:tcp 三次握手、http 請求響應資訊、關閉 tcp 連線。

在客戶端傳送資料之前會發起 tcp 三次握手用以同步客戶端和服務端的序列號和確認號,並交換 tcp 視窗大小資訊。

1.tcp 三次握手的過程如下:

2.為啥需要三次握手

謝希仁著《計算機網路》中講「三次握手」的目的是 「為了防止已失效的連線請求報文段突然又傳送到了服務端,因而產生錯誤」。

tcp 三次握手結束後,開始傳送 http 請求報文。

請求報文由請求行(request line)、請求頭(header)、請求體三個部分組成,如下圖所示:

1.請求行包含請求方法、url、協議版本

以上**中「post」代表請求方法,「/chapter17/user.html」表示 url,「http/1.1」代表協議和協議的版本。現在比較流行的是 http1.1 版本

2.請求頭包含請求的附加資訊

由關鍵字/值對組成,每行一對,關鍵字和值用英文冒號「:」分隔。

請求頭部通知伺服器有關於客戶端請求的資訊。它包含許多有關的客戶端環境和請求正文的有用資訊。其中比如:host,表示主機名,虛擬主機;connection,http/1.1 增加的,使用 keepalive,即持久連線,乙個連線可以發多個請求;user-agent,請求發出者,相容性以及定製化需求

3.請求體

可以承載多個請求引數的資料,包含回車符、換行符和請求資料,並不是所有請求都具有請求資料

name=tom&password=1234&realname=tomson

上面**,承載著name、password、realname三個請求引數。

1. 伺服器

2.mvc 後台處理階段

後台開發現在有很多框架,但大部分都還是按照 mvc 設計模式進行搭建的。

mvc 是乙個設計模式,將應用程式分成三個核心部件:模型(model)-- 檢視(view)–控制器(controller),它們各自處理自己的任務,實現輸入、處理和輸出的分離。

3.http 響應報文

響應報文由響應行(request line)、響應頭部(header)、響應主體三個部分組成。如下圖所示:

(1) 響應行包含:協議版本,狀態碼,狀態碼描述

狀態碼規則如下:

1xx:指示資訊--表示請求已接收,繼續處理。

2xx:成功--表示請求已被成功接收、理解、接受。

3xx:重定向--要完成請求必須進行更進一步的操作。

4xx:客戶端錯誤--請求有語法錯誤或請求無法實現。

5xx:伺服器端錯誤--伺服器未能實現合法的請求。

(2) 響應頭部包含響應報文的附加資訊,由 名/值 對組成

(3) 響應主體包含回車符、換行符和響應返回資料,並不是所有響應報文都有響應資料

瀏覽器拿到響應文字 html 後,接下來介紹下瀏覽器渲染機制

瀏覽器解析渲染頁面分為一下五個步驟:

1.根據 html 解析 dom 樹

2.根據 css 解析生成 css 規則樹

3.結合 dom 樹和 css 規則樹,生成渲染樹

4.根據渲染樹計算每乙個節點的資訊(布局)

5.根據計算好的資訊繪製頁面當資料傳送完畢,需要斷開 tcp 連線,此時發起 tcp 四次揮手。

從URL輸入到頁面展現到底發生什麼?

開啟瀏覽器從輸入 到網頁呈現在大家面前,背後到底發生了什麼?經歷怎麼樣的乙個過程?先給大家來張總體流程圖,具體步驟請看下文分解!本文首發位址為github部落格 總體來說分為以下幾個過程 url uniform resource locator 統一資源定位符,用於定位網際網路上資源,俗稱 比如,遵...

從URL輸入到頁面展現到底發生什麼?

目錄三 tcp 三次握手 四 傳送 http 請求 五 伺服器處理請求並返回 http 報文 六 瀏覽器解析渲染頁面 七 斷開連線 開啟瀏覽器從輸入 到網頁呈現在大家面前,背後到底發生了什麼?經歷怎麼樣的乙個過程?先給大家來張總體流程圖,具體步驟請看下文分解!總體來說分為以下幾個過程 url uni...

從url輸入到頁面展現到底發生了什麼

開啟瀏覽器從輸入 到網頁呈現在大家面前,背後到底發生了什麼?經歷怎麼樣的乙個過程?先給大家來張總體流程圖,具體步驟請看下文分解!本文首發位址為github部落格 總體來說分為以下幾個過程 url uniform resource locator 統一資源定位符,用於定位網際網路上資源,俗稱 比如 遵...