從URL輸入到頁面展現到底發生什麼?DNS 解析&TCP 連接

来源:https://www.cnblogs.com/wangguoxinyue/archive/2022/05/09/16249812.html
-Advertisement-
Play Games

DNS 解析:將功能變數名稱解析成 IP 地址 TCP 連接:TCP 三次握手 發送 HTTP 請求 伺服器處理請求並返回 HTTP 報文 瀏覽器解析渲染頁面 斷開連接:TCP 四次揮手 一、什麼是URL? URL(Uniform Resource Locator),統一資源定位符,用於定位互聯網上資源,俗 ...


  • DNS 解析:將功能變數名稱解析成 IP 地址
  • TCP 連接:TCP 三次握手
  • 發送 HTTP 請求
  • 伺服器處理請求並返回 HTTP 報文
  • 瀏覽器解析渲染頁面
  • 斷開連接:TCP 四次揮手

一、什麼是URL?

URL(Uniform Resource Locator),統一資源定位符,用於定位互聯網上資源,俗稱網址。

scheme: // host.domain:port / path / filename ? abc = 123 # 456789
scheme       - 定義網際網路服務的類型。常見的協議有 http、https、ftp、file,
               其中最常見的類型是 http,而 https 則是進行加密的網路傳輸。
host         - 定義域主機(http 的預設主機是 www)
domain       - 定義網際網路功能變數名稱,比如 baidu.com
port         - 定義主機上的埠號(http 的預設埠號是 80)
path         - 定義伺服器上的路徑(如果省略,則文檔必須位於網站的根目錄中)。
filename     - 定義文檔/資源的名稱
query        - 即查詢參數
fragment     - 即 # 後的hash值,一般用來定位到某個位置

 

二、DNS功能變數名稱解析

在瀏覽器輸入網址後,首先要經過功能變數名稱解析,因為瀏覽器並不能直接通過功能變數名稱找到對應的伺服器,而是要通過 IP 地址。

DNS 是:
一個由分層的 DNS 伺服器實現的分散式資料庫
一個使得主機能夠查詢分散式資料庫的應用層協議
  • 什麼是分散式?

這個世界上沒有一臺 DNS 伺服器擁有網際網路上所有主機的映射,每台 DNS 只負責部分映射。

  • 什麼是層次?

DNS 伺服器有 3 種類型:根 DNS 伺服器、頂級域(Top-Level Domain, TLD)DNS 伺服器和權威 DNS 伺服器。它們的層次結構如下圖所示:

  1. IP 地址
IP 地址是指互聯網協議地址,是 IP Address 的縮寫。IP 地址是 IP 協議提供的一種統一的地址格式,
它為互聯網上的每一個網路和每一臺主機分配一個邏輯地址,以此來屏蔽物理地址的差異。
  1. 什麼是功能變數名稱解析
DNS 協議提供通過功能變數名稱查找 IP 地址,或逆向從 IP 地址反查功能變數名稱的服務。
DNS 是一個網路伺服器,我們的功能變數名稱解析簡單來說就是在 DNS 上記錄一條信息記錄。
  1. 瀏覽器如何通過功能變數名稱去查詢 URL 對應的 IP 呢?
DNS功能變數名稱解析分為遞歸查詢和迭代查詢兩種方式,現一般為迭代查詢。

三、TCP三次握手

 



 

 

  • 客戶端發送一個帶 SYN=1,Seq=X 的數據包到伺服器埠(第一次握手,由瀏覽器發起,告訴伺服器我要發送請求了)

  • 伺服器發回一個帶 SYN=1, ACK=X+1, Seq=Y 的響應包以示傳達確認信息(第二次握手,由伺服器發起,告訴瀏覽器我準備接受了,你趕緊發送吧)

  • 客戶端再回傳一個帶 ACK=Y+1, Seq=Z 的數據包,代表“握手結束”(第三次握手,由瀏覽器發送,告訴伺服器,我馬上就發了,準備接受吧)

總是要問:為什麼需要三次握手,兩次不行嗎?其實這是由 TCP 的自身特點可靠傳輸決定的。客戶端和服務端要進行可靠傳輸,那麼就需要確認雙方的接收和發送能力。第一次握手可以確認客服端的發送能力,第二次握手,確認了服務端的發送能力和接收能力,所以第三次握手才可以確認客戶端的接收能力。不然容易出現丟包的現象。

 

四、發送 HTTP 請求

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

  • HTTP是無連接的: 無連接的含義是限制每次連接只處理一個請求。伺服器處理完客戶的請求,並收到客戶的應答後,即斷開連接。採用這種方式可以節省傳輸時間。 一個連接是由傳輸層來控制的,這從根本上不屬於HTTP的範圍。HTTP並不需要其底層的傳輸層協議是面向連接的,只需要它是可靠的,或不丟失消息的(至少返回錯誤)。
  • HTTP是可擴展的: 在 HTTP/1.0 中出現的 HTTP headers 讓協議擴展變得非常容易。只要服務端和客戶端就新 headers 達成語義一致,新功能就可以被輕鬆加入進來。
  • HTTP是無狀態: HTTP協議是無狀態協議。無狀態是指協議對於事務處理沒有記憶能力。缺少狀態意味著如果後續處理需要前面的信息,則它必須重傳,這樣可能導致每次連接傳送的數據量增大。另一方面,在伺服器不需要先前信息時它的應答就較快。 使用Cookies可以創建有狀態的會話。
  • HTTP頭部信息

根據不同上下文,可將消息頭分為:

1、General headers(通用標頭): 同時適用於請求和響應消息,但與最終消息主體中傳輸的數據無關的消息頭。

2、Request headers: 包含更多有關要獲取的資源或客戶端本身信息的消息頭。

3、Response headers: 包含有關響應的補充信息,如其位置或伺服器本身(名稱和版本等)的消息頭。

4、Entity headers(實體標頭): 包含有關實體主體的更多信息,比如主體長(Content-Length)度或其MIME類型。

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

每台伺服器上都會安裝處理請求的應用——Web server。常見的web server產品有apache、nginx、IIS、Lighttpd等。

六、瀏覽器解析渲染頁面

 

用戶界面    (User Interface)    - 包括地址欄、後退/前進按鈕、書簽目錄等,也就是你所看到的除了用來顯示你所請求頁面的主視窗之外的其他部分

瀏覽器引擎  (Browser Engine)    - 用來查詢及操作渲染引擎的介面

渲染引擎    (Rendering Engine)  - 用來顯示請求的內容,例如,如果請求內容為html,它負責解析html及css,並將解析後的結果顯示出來

網路        (Networking)        - 用來完成網路調用,例如http請求,它具有平臺無關的介面,可以在不同平臺上工作

JS解釋器    (JS Interpreter)    - 用來解釋執行JS代碼

UI後端      (UI Backend)        - 用來繪製類似組合選擇框及對話框等基本組件,具有不特定於某個平臺的通用介面,底層使用操作系統的用戶介面

數據存儲    (DB Persistence)    - 屬於持久層,瀏覽器需要在硬碟中保存類似cookie的各種數據,HTML5定義了web database技術,這是一種輕量級完整的客戶端存儲技術

1.多進程的瀏覽器

瀏覽器是多進程的,有一個主控進程,以及每一個tab頁面都會新開一個進程(某些情況下多個tab會合併進程)

進程可能包括主控進程,插件進程,GPU,tab頁(瀏覽器內核)等等

  • Browser進程:瀏覽器的主進程(負責協調、主控),只有一個
  • 第三方插件進程:每種類型的插件對應一個進程,僅當使用該插件時才創建
  • GPU進程:最多一個,用於3D繪製
  • 瀏覽器渲染進程(內核):預設每個Tab頁面一個進程,互不影響,控制頁面渲染,腳本執行,事件處理等(有時候會優化,如多個空白tab會合併成一個進程)

2.多線程的瀏覽器內核

每一個tab頁面可以看作是瀏覽器內核進程,然後這個進程是多線程的,它有幾大類子線程:

  1. GUI線程
  2. JS引擎線程
  3. 事件觸發線程
  4. 定時器線程
  5. 網路請求線程

3.瀏覽器內核拿到內容後,渲染步驟大致可以分為以下幾步:

1. 解析HTML,構建DOM樹

2. 解析CSS,生成CSS規則樹

3. 合併DOM樹和CSS規則,生成render樹

4. 佈局render樹(Layout/reflow),負責各元素尺寸、位置的計算

5. 繪製render樹(paint),繪製頁面像素信息

 

(1) HTML解析,構建DOM

簡單的理解,這一步的流程是這樣的:瀏覽器解析HTML,構建DOM樹。 解析HTML到構建出DOM當然過程可以簡述如下:

Bytes → characters → tokens → nodes → DOM

 

1. Conversion轉換:瀏覽器將獲得的HTML內容(Bytes)基於他的編碼轉換為單個字元

2. Tokenizing分詞:瀏覽器按照HTML規範標准將這些字元轉換為不同的標記token。每個token都有自己獨特的含義以及規則集

3. Lexing詞法分析:分詞的結果是得到一堆的token,此時把他們轉換為對象,這些對象分別定義他們的屬性和規則

4. DOM構建:因為HTML標記定義的就是不同標簽之間的關係,這個關係就像是一個樹形結構一樣
例如:body對象的父節點就是HTML對象,然後段略p對象的父節點就是body對象 

(2) 解析CSS,生成CSS規則樹

同理,CSS規則樹的生成也是類似。

Bytes → characters → tokens → nodes → CSSOM

 

 

(3)合併DOM樹和CSS規則,生成render樹

當DOM樹和CSSOM都有了後,就要開始構建渲染樹了

一般來說,渲染樹和DOM樹相對應的,但不是嚴格意義上的一一對應,因為有一些不可見的DOM元素不會插入到渲染樹中,如head這種不可見的標簽或者display: none等

 

(4)佈局render樹(Layout/Reflow),負責各元素尺寸、位置的計算

佈局:通過渲染樹中渲染對象的信息,計算出每一個渲染對象的位置和尺寸。

(5)繪製render樹(Paint),繪製頁面像素信息

繪製階段,系統會遍歷呈現樹,並調用呈現器的“paint”方法,將呈現器的內容顯示在屏幕上。

這張圖片中重要的四個步驟
1. 計算CSS樣式

2. 構建渲染樹

3. 佈局,主要定位坐標和大小,是否換行,各種position overflow z-index屬性

4. 繪製,將圖像繪製出來
  • Layout,也稱為Reflow,即迴流。一般意味著元素的內容、結構、位置或尺寸發生了變化,需要重新計算樣式和渲染樹
  • Repaint,即重繪。意味著元素髮生的改變只是影響了元素的一些外觀之類的時候(例如,背景色,邊框顏色,文字顏色等),此時只需要應用新樣式繪製這個元素就可以了

七、斷開連接

當數據傳送完畢,需要斷開 tcp 連接,此時發起 tcp 四次揮手。

 

 

  • 發起方向被動方發送報文,Fin、Ack、Seq,表示已經沒有數據傳輸了。併進入 FIN_WAIT_1 狀態。(第一次揮手:由瀏覽器發起的,發送給伺服器,我請求報文發送完了,你準備關閉吧)
  • 被動方發送報文,Ack、Seq,表示同意關閉請求。此時主機發起方進入 FIN_WAIT_2 狀態。 (第二次揮手:由伺服器發起的,告訴瀏覽器,我請求報文接受完了,我準備關閉了,你也準備吧)
  • 被動方向發起方發送報文段,Fin、Ack、Seq,請求關閉連接。併進入 LAST_ACK 狀態。 (第三次揮手:由伺服器發起,告訴瀏覽器,我響應報文發送完了,你準備關閉吧)
  • 發起方向被動方發送報文段,Ack、Seq。然後進入等待 TIME_WAIT 狀態。被動方收到發起方的報文段以後關閉連接。發起方等待一定時間未收到回覆,則正常關閉。 (第四次揮手:由瀏覽器發起,告訴伺服器,我響應報文接受完了,我準備關閉了,你也準備吧)

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在直播、語聊房、K 歌房場景中,為增加趣味性和互動性,玩家可以通過變聲來搞怪,通過混響烘托氣氛,通過立體聲使聲音更具立體感。ZegoExpress SDK 提供了多種預設的變聲、混響、混響回聲、立體聲效果,開發者可以靈活設置自己想要的聲音,如果需要試聽,可以啟用耳返進行測試。 ...
  • 在 OpenHarmony 生態發展過程中,涌現了大批優秀的代碼貢獻者,本專題旨在表彰貢獻、分享經驗,文中內容來自嘉賓訪談,不代表 OpenHarmony 工作委員會觀點。 ...
  • 如今,身材管理已成為人們日常生活中重點關註的內容,除了運動之外,熱量的攝入也是重中之重,想要維持理想的身體健康和體重狀態,人們需要長期測量自己每日攝入食物的體量、熱量和營養價值,這需要實踐者有極強的耐心、執行力和知識儲備,從而成為了一部分身材管理道路上的攔路虎。 因此很多運動健康類App中支持食物識 ...
  • 今天內容挺多,因為想的是必須在一天內把這個vuex完成,說實話這裡面要記得東西還是蠻多的,主要是分為原生的和簡便方法兩種都是vue官方定義的,只不過看你要用哪種,vuex感覺要是用熟練了不得了,直接可以把vue起飛了,數據到處用,那種起飛的感覺,曾經體驗過,所以這個應該還是可以多練練的。 明天進入v ...
  • 8 個你應該立即停止使用的無效 HTML 元素 HTML 規範的開發是一個漸進的過程,有時會出現問題。隨著時間的推移,許多元素和屬性被添加到 HTML 中,直到後來 Web 社區集體意識到有更好的方法時才被刪除。由於已棄用和過時的元素和屬性已經存在於網路上,因此許多現代瀏覽器繼續支持它們的使用。儘管 ...
  • 前言 在我們日常代碼開發過程中,組件的使用是必不可少的,我們也會去封裝組件。但是大家寫組件的風格各式各樣,沒有一個統一的準則。而且也沒有遵循軟體開發的原則:高內聚、低耦合;因為我是給行業提供代碼的,行業給交付提供代碼。我們要儘量去減少大家的接入成本,降低接入成本的最好方案就是我們在設計組件的時候編寫 ...
  • HBuilderx快速新建VUE項目 一、安裝HBuilderx開發工具 官網:HBuilderX HBuilderXH是HTML的第一個字母,Builder是builder,X是HBuilder的下一個版本。我們也被稱為HX。 HBuilderX是輕量級但功能強大的 IDE。 它的官網上介紹到HB ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一、面向對象 一般使用字面量的形式直接創建對象,但是這種創建方式對於創建大量相似對象的時候,會產生大量的重覆代碼。但 js和一般的面向對象的語言不同,在 ES6 之前它沒有類的概念。但是可以使用函數來進行模擬,從而產生出可復用的對象創建方 ...
一周排行
    -Advertisement-
    Play Games
  • 分組和樹形結構是不一樣的。 樹形結構是以遞歸形式存在。分組是以鍵值對存在的形式,類似於GroupBy這樣的形式。 舉個例子 ID NAME SEX Class 1 張三 男 1 2 李四 女 2 3 王二 男 1 當以Sex為分組依據時則是 Key Value 男 1 張三 男 1 3 王二 男 1 ...
  • NetCore中將SQLServer資料庫備份為Sql腳本 描述: 最近寫項目收到了一個需求, 就是將SQL Server資料庫備份為Sql腳本, 如果是My Sql之類的還好說, 但是在網上搜了一大堆, 全是教你怎麼操作SSMS的, 就很d疼! 解決方案: 通過各種查找資料, 還有一些老哥的幫助, ...
  • 我的Notion Clowd.Squirrel Squirrel.Windows 是一組工具和適用於.Net的庫,用於管理 Desktop Windows 應用程式的安裝和更新。 Squirrel.Windows 對 Windows 應用程式的實現語言沒有任何要求,甚至無需服務端即可完成增量更新。 ...
  • 轉載請註明來源 https://www.cnblogs.com/brucejiao/p/16188865.html 謝謝! 轉載請註明來源 https://www.cnblogs.com/brucejiao/p/16188865.html 謝謝! 轉載請註明來源 https://www.cnblog ...
  • 1. Netty源碼研究筆記(3)——Channel系列 依舊是通過先縱向再橫向的研究方法,在開篇中,我們發現不管是Sever還是Client,最終的啟動是通過調用channel的對應方法來完成的,而這個動作實際在channel綁定的eventLoop中執行。 接下來,我們繼續EchoSever、E ...
  • 大家好,今天給大家介紹一款輕量、快速、穩定可編排的組件式規則引擎框架LiteFlow。 一、LiteFlow的介紹 LiteFlow官方網站和代碼倉庫地址 官方網站:https://yomahub.com/liteflow Gitee托管倉庫:https://gitee.com/dromara/li ...
  • 我使用Spring AOP實現了用戶操作日誌功能 今天答辯完了,復盤了一下系統,發現還是有一些東西值得拿出來和大家分享一下。 需求分析 系統需要對用戶的操作進行記錄,方便未來溯源 首先想到的就是在每個方法中,去實現記錄的邏輯,但是這樣做肯定是不現實的,首先工作量大,其次違背了軟體工程設計原則(開閉原 ...
  • 《零基礎學Java》 繪製幾何圖形 Java可以分別使用 Graphics 和 Graphics2D 繪製圖形,Graphics類 使用不同的方法繪製不同的圖形(drawLine()方法可f以繪製線、drawRect()方法用於繪製矩形、drawOval()方法用於繪製橢圓形)。 Graphics類 ...
  • 本期教程人臉識別第三方平臺為虹軟科技,本文章講解的是人臉識別RGB活體追蹤技術,免費的功能很多可以自行搭配,希望在你看完本章課程有所收穫。 ...
  • 很多人都喜歡使用黑色的主題樣式,包括我自己,使用了差不多三年的黑色主題,但是個人覺得在進行視窗轉換的時候很廢眼睛。 比如IDEA是全黑的,然後需要看PDF或者WORD又變成白色的了,這樣來回切換導致眼睛很累,畢竟現在網頁以及大部分軟體的界面都是白色的。那麼還是老老實實的使用原來比較順眼的模式吧。 1 ...