從URl輸入到頁面展示到底發(fā)生了什么？

從開發(fā)&運維角度方面來看，總體來說分為以下幾個過程：

  • DNS 解析:將域名解析成 IP 地址
  • TCP 連接：TCP 三次握手
  • 發(fā)送 HTTP 請求
  • 服務(wù)器處理請求并返回 HTTP 報文
  • 瀏覽器解析渲染頁面
  • 斷開連接：TCP 四次揮手
一、什么是URL?
URL（Uniform Resource Locator），統(tǒng)一資源定位符，用于定位互聯(lián)網(wǎng)上資源，俗稱網(wǎng)址。
舉例：scheme: // host.domain:port / path / filename ? abc = 123 # 456789
scheme       - 定義因特網(wǎng)服務(wù)的類型。常見的協(xié)議有 http、https、ftp、file，
               其中最常見的類型是 http，而 https 則是進行加密的網(wǎng)絡(luò)傳輸。
host         - 定義域主機（http 的默認主機是 www）
domain       - 定義因特網(wǎng)域名，比如 baidu.com
port         - 定義主機上的端口號（http 的默認端口號是 80）
path         - 定義服務(wù)器上的路徑（如果省略，則文檔必須位于網(wǎng)站的根目錄中）。
filename     - 定義文檔/資源的名稱
query        - 即查詢參數(shù)
fragment     - 即 # 后的hash值，一般用來定位到某個位置
二、DNS域名解析
在瀏覽器輸入網(wǎng)址后，首先要經(jīng)過域名解析，因為瀏覽器并不能直接通過域名找到對應(yīng)的服務(wù)器，而是要通過 IP 地址。
1.IP 地址
IP 地址是指互聯(lián)網(wǎng)協(xié)議地址，是 IP Address 的縮寫。IP 地址是 IP 協(xié)議提供的一種統(tǒng)一的地址格式，
它為互聯(lián)網(wǎng)上的每一個網(wǎng)絡(luò)和每一臺主機分配一個邏輯地址，以此來屏蔽物理地址的差異。
2.什么是域名解析
DNS 協(xié)議提供通過域名查找 IP 地址，或逆向從 IP 地址反查域名的服務(wù)。
DNS 是一個網(wǎng)絡(luò)服務(wù)器，我們的域名解析簡單來說就是在 DNS 上記錄一條信息記錄。
3.瀏覽器如何通過域名去查詢 URL 對應(yīng)的 IP 呢？
DNS域名解析分為遞歸查詢和迭代查詢兩種方式，現(xiàn)一般為迭代查詢。
DNS解析
DNS的優(yōu)化與應(yīng)用
1.DNS緩存 DNS存在著多級緩存，從離瀏覽器的距離排序的話，有以下幾種: 瀏覽器緩存，系統(tǒng)緩存，路由器緩存，IPS服務(wù)器緩存，根域名服務(wù)器緩存，頂級域名服務(wù)器緩存，主域名服務(wù)器緩存。
2.DNS負載均衡(DNS重定向) DNS負載均衡技術(shù)的實現(xiàn)原理是在DNS服務(wù)器中為同一個主機名配置多個IP地址，在應(yīng)答DNS查詢時， DNS服務(wù)器對每個查詢將以DNS文件中主機記錄的IP地址按順序返回不同的解析結(jié)果，將客戶端的訪問 引導(dǎo)到不同的機器上去，使得不同的客戶端訪問不同的服務(wù)器，從而達到負載均衡的目的。
  • 大家耳熟能詳?shù)腃DN(Content Delivery Network)就是利用DNS的重定向技術(shù)，DNS服務(wù)器會返回一個跟 用戶最接近的點的IP地址給用戶，CDN節(jié)點的服務(wù)器負責響應(yīng)用戶的請求，提供所需的內(nèi)容
3.dns-prefetch DNS Prefetch 是一種 DNS 預(yù)解析技術(shù)。當你瀏覽網(wǎng)頁時，瀏覽器會在加載網(wǎng)頁時對網(wǎng)頁中的域名進行解析緩存，這樣在你單擊當前網(wǎng)頁中的連接時就無需進行 DNS 的解析，減少用戶等待時間，提高用戶體驗。
OSI參考模型與TCP/IP四層模型
OSI參考模型與TCP/IP四層模型
三、TCP三次握手
TCP三次握手
  • 客戶端發(fā)送一個帶 SYN=1，Seq=X 的數(shù)據(jù)包到服務(wù)器端口（第一次握手，由瀏覽器發(fā)起，告訴服務(wù)器我要發(fā)送請求了）
  • 服務(wù)器發(fā)回一個帶 SYN=1， ACK=X+1， Seq=Y 的響應(yīng)包以示傳達確認信息（第二次握手，由服務(wù)器發(fā)起，告訴瀏覽器我準備接受了，你趕緊發(fā)送吧）
  • 客戶端再回傳一個帶 ACK=Y+1， Seq=Z 的數(shù)據(jù)包，代表“握手結(jié)束”（第三次握手，由瀏覽器發(fā)送，告訴服務(wù)器，我馬上就發(fā)了，準備接受吧）
四、發(fā)送 HTTP 請求
TCP 三次握手結(jié)束后，開始發(fā)送 HTTP 請求報文。

為避免篇幅過長，http協(xié)議、緩存等相關(guān)內(nèi)容請參閱： 從HTTP到WEB緩存

五、服務(wù)器處理請求并返回 HTTP 報文
每臺服務(wù)器上都會安裝處理請求的應(yīng)用——Web server。常見的web server產(chǎn)品有apache、nginx、IIS、Lighttpd等。
image.png
六、瀏覽器解析渲染頁面
瀏覽器的主要構(gòu)成
image.png

用戶界面    (User Interface)    － 包括地址欄、后退/前進按鈕、書簽?zāi)夸浀?，也就是你所看到的除了用來顯示你所請求頁面的主窗口之外的其他部分

瀏覽器引擎  (Browser Engine)    － 用來查詢及操作渲染引擎的接口

渲染引擎    (Rendering Engine)  － 用來顯示請求的內(nèi)容，例如，如果請求內(nèi)容為html，它負責解析html及css，并將解析后的結(jié)果顯示出來

網(wǎng)絡(luò)        (Networking)        － 用來完成網(wǎng)絡(luò)調(diào)用，例如http請求，它具有平臺無關(guān)的接口，可以在不同平臺上工作

JS解釋器    (JS Interpreter)    － 用來解釋執(zhí)行JS代碼

UI后端      (UI Backend)        － 用來繪制類似組合選擇框及對話框等基本組件，具有不特定于某個平臺的通用接口，底層使用操作系統(tǒng)的用戶接口

數(shù)據(jù)存儲    (DB Persistence)    － 屬于持久層，瀏覽器需要在硬盤中保存類似cookie的各種數(shù)據(jù)，HTML5定義了web database技術(shù)，這是一種輕量級完整的客戶端存儲技術(shù)
1.多進程的瀏覽器
瀏覽器是多進程的，有一個主控進程，以及每一個tab頁面都會新開一個進程（某些情況下多個tab會合并進程）
進程可能包括主控進程，插件進程，GPU，tab頁（瀏覽器內(nèi)核）等等
  • Browser進程：瀏覽器的主進程（負責協(xié)調(diào)、主控），只有一個
  • 第三方插件進程：每種類型的插件對應(yīng)一個進程，僅當使用該插件時才創(chuàng)建
  • GPU進程：最多一個，用于3D繪制
  • 瀏覽器渲染進程（內(nèi)核）：默認每個Tab頁面一個進程，互不影響，控制頁面渲染，腳本執(zhí)行，事件處理等（有時候會優(yōu)化，如多個空白tab會合并成一個進程）
瀏覽器內(nèi)核拿到內(nèi)容后，渲染步驟大致可以分為以下幾步：
1. 解析HTML，構(gòu)建DOM樹

2. 解析CSS，生成CSS規(guī)則樹

3. 合并DOM樹和CSS規(guī)則，生成render樹

4. 布局render樹（Layout/reflow），負責各元素尺寸、位置的計算

5. 繪制render樹（paint），繪制頁面像素信息

以webkit內(nèi)核為例

image.png

1. HTML解析，構(gòu)建DOM
簡單的理解，這一步的流程是這樣的：瀏覽器解析HTML，構(gòu)建DOM樹。 解析HTML到構(gòu)建出DOM當然過程可以簡述如下：
Bytes → characters → tokens → nodes → DOM

image.png

其中比較關(guān)鍵的幾個步驟：

1. Conversion轉(zhuǎn)換：瀏覽器將獲得的HTML內(nèi)容（Bytes）基于他的編碼轉(zhuǎn)換為單個字符

2. Tokenizing分詞：瀏覽器按照HTML規(guī)范標準將這些字符轉(zhuǎn)換為不同的標記token。每個token都有自己獨特的含義以及規(guī)則集

3. Lexing詞法分析：分詞的結(jié)果是得到一堆的token，此時把他們轉(zhuǎn)換為對象，這些對象分別定義他們的屬性和規(guī)則

4. DOM構(gòu)建：因為HTML標記定義的就是不同標簽之間的關(guān)系，這個關(guān)系就像是一個樹形結(jié)構(gòu)一樣
例如：body對象的父節(jié)點就是HTML對象，然后段略p對象的父節(jié)點就是body對象
2. 解析CSS，生成CSS規(guī)則樹
同理，CSS規(guī)則樹的生成也是類似。
Bytes → characters → tokens → nodes → CSSOM
image.png
3. 合并DOM樹和CSS規(guī)則，生成render樹
當DOM樹和CSSOM都有了后，就要開始構(gòu)建渲染樹了
一般來說，渲染樹和DOM樹相對應(yīng)的，但不是嚴格意義上的一一對應(yīng),因為有一些不可見的DOM元素不會插入到渲染樹中，如head這種不可見的標簽或者display: none等
image.png
4. 布局render樹（Layout/Reflow），負責各元素尺寸、位置的計算
布局：通過渲染樹中渲染對象的信息，計算出每一個渲染對象的位置和尺寸。
5. 繪制render樹（Paint），繪制頁面像素信息
繪制階段，系統(tǒng)會遍歷呈現(xiàn)樹，并調(diào)用呈現(xiàn)器的“paint”方法，將呈現(xiàn)器的內(nèi)容顯示在屏幕上。
image.png
這張圖片中重要的四個步驟
1. 計算CSS樣式

2. 構(gòu)建渲染樹

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

4. 繪制，將圖像繪制出來
  • Layout，也稱為Reflow，即回流。一般意味著元素的內(nèi)容、結(jié)構(gòu)、位置或尺寸發(fā)生了變化，需要重新計算樣式和渲染樹
  • Repaint，即重繪。意味著元素發(fā)生的改變只是影響了元素的一些外觀之類的時候（例如，背景色，邊框顏色，文字顏色等），此時只需要應(yīng)用新樣式繪制這個元素就可以了
七、斷開連接
當數(shù)據(jù)傳送完畢，需要斷開 tcp 連接，此時發(fā)起 tcp 四次揮手。
image.png
  • 發(fā)起方向被動方發(fā)送報文，F(xiàn)in、Ack、Seq，表示已經(jīng)沒有數(shù)據(jù)傳輸了。并進入 FIN_WAIT_1 狀態(tài)。 (第一次揮手：由瀏覽器發(fā)起的，發(fā)送給服務(wù)器，我請求報文發(fā)送完了，你準備關(guān)閉吧)
  • 被動方發(fā)送報文，Ack、Seq，表示同意關(guān)閉請求。此時主機發(fā)起方進入 FIN_WAIT_2 狀態(tài)。 (第二次揮手：由服務(wù)器發(fā)起的，告訴瀏覽器，我請求報文接受完了，我準備關(guān)閉了，你也準備吧)
  • 被動方向發(fā)起方發(fā)送報文段，F(xiàn)in、Ack、Seq，請求關(guān)閉連接。并進入 LAST_ACK 狀態(tài)。 (第三次揮手：由服務(wù)器發(fā)起，告訴瀏覽器，我響應(yīng)報文發(fā)送完了，你準備關(guān)閉吧)
  • 發(fā)起方向被動方發(fā)送報文段，Ack、Seq。然后進入等待 TIME_WAIT 狀態(tài)。被動方收到發(fā)起方的報文段以后關(guān)閉連接。發(fā)起方等待一定時間未收到回復(fù)，則正常關(guān)閉。 (第四次揮手：由瀏覽器發(fā)起，告訴服務(wù)器，我響應(yīng)報文接受完了，我準備關(guān)閉了，你也準備吧)
參考文章：
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容