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

• DNS 解析:將域名解析成 IP 地址

• TCP 連接：TCP 三次握手

• 發(fā)送 HTTP 請(qǐng)求

• 服務(wù)器處理請(qǐng)求并返回 HTTP 報(bào)文

• 瀏覽器解析渲染頁面

• 斷開連接：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 則是進(jìn)行加密的網(wǎng)絡(luò)傳輸。
host         - 定義域主機(jī)（http 的默認(rèn)主機(jī)是 www）
domain       - 定義因特網(wǎng)域名，比如 baidu.com
port         - 定義主機(jī)上的端口號(hào)（http 的默認(rèn)端口號(hào)是 80）
path         - 定義服務(wù)器上的路徑（如果省略，則文檔必須位于網(wǎng)站的根目錄中）。
filename     - 定義文檔/資源的名稱
query        - 即查詢參數(shù)
fragment     - 即 # 后的hash值，一般用來定位到某個(gè)位置

二、DNS域名解析

在瀏覽器輸入網(wǎng)址后，首先要經(jīng)過域名解析，因?yàn)闉g覽器并不能直接通過域名找到對(duì)應(yīng)的服務(wù)器，而是要通過 IP 地址。

1.IP 地址

IP 地址是指互聯(lián)網(wǎng)協(xié)議地址，是 IP Address 的縮寫。IP 地址是 IP 協(xié)議提供的一種統(tǒng)一的地址格式，
它為互聯(lián)網(wǎng)上的每一個(gè)網(wǎng)絡(luò)和每一臺(tái)主機(jī)分配一個(gè)邏輯地址，以此來屏蔽物理地址的差異。

2.什么是域名解析

DNS 協(xié)議提供通過域名查找 IP 地址，或逆向從 IP 地址反查域名的服務(wù)。
DNS 是一個(gè)網(wǎng)絡(luò)服務(wù)器，我們的域名解析簡單來說就是在 DNS 上記錄一條信息記錄。

3.瀏覽器如何通過域名去查詢 URL 對(duì)應(yīng)的 IP 呢？

DNS域名解析分為遞歸查詢和迭代查詢兩種方式，現(xiàn)一般為迭代查詢。

DNS解析

DNS的優(yōu)化與應(yīng)用

1.DNS緩存 DNS存在著多級(jí)緩存，從離瀏覽器的距離排序的話，有以下幾種: 瀏覽器緩存，系統(tǒng)緩存，路由器緩存，IPS服務(wù)器緩存，根域名服務(wù)器緩存，頂級(jí)域名服務(wù)器緩存，主域名服務(wù)器緩存。

2.DNS負(fù)載均衡(DNS重定向) DNS負(fù)載均衡技術(shù)的實(shí)現(xiàn)原理是在DNS服務(wù)器中為同一個(gè)主機(jī)名配置多個(gè)IP地址，在應(yīng)答DNS查詢時(shí)， DNS服務(wù)器對(duì)每個(gè)查詢將以DNS文件中主機(jī)記錄的IP地址按順序返回不同的解析結(jié)果，將客戶端的訪問 引導(dǎo)到不同的機(jī)器上去，使得不同的客戶端訪問不同的服務(wù)器，從而達(dá)到負(fù)載均衡的目的。

• 大家耳熟能詳?shù)腃DN(Content Delivery Network)就是利用DNS的重定向技術(shù)，DNS服務(wù)器會(huì)返回一個(gè)跟 用戶最接近的點(diǎn)的IP地址給用戶，CDN節(jié)點(diǎn)的服務(wù)器負(fù)責(zé)響應(yīng)用戶的請(qǐng)求，提供所需的內(nèi)容

3.dns-prefetch DNS Prefetch 是一種 DNS 預(yù)解析技術(shù)。當(dāng)你瀏覽網(wǎng)頁時(shí)，瀏覽器會(huì)在加載網(wǎng)頁時(shí)對(duì)網(wǎng)頁中的域名進(jìn)行解析緩存，這樣在你單擊當(dāng)前網(wǎng)頁中的連接時(shí)就無需進(jìn)行 DNS 的解析，減少用戶等待時(shí)間，提高用戶體驗(yàn)。

OSI參考模型與TCP/IP四層模型

OSI參考模型與TCP/IP四層模型

三、TCP三次握手

TCP三次握手

• 客戶端發(fā)送一個(gè)帶 SYN=1，Seq=X 的數(shù)據(jù)包到服務(wù)器端口（第一次握手，由瀏覽器發(fā)起，告訴服務(wù)器我要發(fā)送請(qǐng)求了）
• 服務(wù)器發(fā)回一個(gè)帶 SYN=1， ACK=X+1， Seq=Y 的響應(yīng)包以示傳達(dá)確認(rèn)信息（第二次握手，由服務(wù)器發(fā)起，告訴瀏覽器我準(zhǔn)備接受了，你趕緊發(fā)送吧）
• 客戶端再回傳一個(gè)帶 ACK=Y+1， Seq=Z 的數(shù)據(jù)包，代表“握手結(jié)束”（第三次握手，由瀏覽器發(fā)送，告訴服務(wù)器，我馬上就發(fā)了，準(zhǔn)備接受吧）

四、發(fā)送 HTTP 請(qǐng)求

TCP 三次握手結(jié)束后，開始發(fā)送 HTTP 請(qǐng)求報(bào)文。

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

五、服務(wù)器處理請(qǐng)求并返回 HTTP 報(bào)文

每臺(tái)服務(wù)器上都會(huì)安裝處理請(qǐng)求的應(yīng)用——Web server。常見的web server產(chǎn)品有apache、nginx、IIS、Lighttpd等。

image.png

六、瀏覽器解析渲染頁面

瀏覽器的主要構(gòu)成

image.png

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

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

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

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

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

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

數(shù)據(jù)存儲(chǔ)    (DB Persistence)    － 屬于持久層，瀏覽器需要在硬盤中保存類似cookie的各種數(shù)據(jù)，HTML5定義了web database技術(shù)，這是一種輕量級(jí)完整的客戶端存儲(chǔ)技術(shù)

1.多進(jìn)程的瀏覽器

瀏覽器是多進(jìn)程的，有一個(gè)主控進(jìn)程，以及每一個(gè)tab頁面都會(huì)新開一個(gè)進(jìn)程（某些情況下多個(gè)tab會(huì)合并進(jìn)程）

進(jìn)程可能包括主控進(jìn)程，插件進(jìn)程，GPU，tab頁（瀏覽器內(nèi)核）等等

• Browser進(jìn)程：瀏覽器的主進(jìn)程（負(fù)責(zé)協(xié)調(diào)、主控），只有一個(gè)

• 第三方插件進(jìn)程：每種類型的插件對(duì)應(yīng)一個(gè)進(jìn)程，僅當(dāng)使用該插件時(shí)才創(chuàng)建

• GPU進(jìn)程：最多一個(gè)，用于3D繪制

• 瀏覽器渲染進(jìn)程（內(nèi)核）：默認(rèn)每個(gè)Tab頁面一個(gè)進(jìn)程，互不影響，控制頁面渲染，腳本執(zhí)行，事件處理等（有時(shí)候會(huì)優(yōu)化，如多個(gè)空白tab會(huì)合并成一個(gè)進(jìn)程）

瀏覽器內(nèi)核拿到內(nèi)容后，渲染步驟大致可以分為以下幾步：

1. 解析HTML，構(gòu)建DOM樹

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

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

4. 布局render樹（Layout/reflow），負(fù)責(zé)各元素尺寸、位置的計(jì)算

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

以webkit內(nèi)核為例

image.png

1. HTML解析，構(gòu)建DOM

簡單的理解，這一步的流程是這樣的：瀏覽器解析HTML，構(gòu)建DOM樹。 解析HTML到構(gòu)建出DOM當(dāng)然過程可以簡述如下：

Bytes → characters → tokens → nodes → DOM

image.png

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

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

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

4. DOM構(gòu)建：因?yàn)镠TML標(biāo)記定義的就是不同標(biāo)簽之間的關(guān)系，這個(gè)關(guān)系就像是一個(gè)樹形結(jié)構(gòu)一樣
例如：body對(duì)象的父節(jié)點(diǎn)就是HTML對(duì)象，然后段略p對(duì)象的父節(jié)點(diǎn)就是body對(duì)象

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

同理，CSS規(guī)則樹的生成也是類似。

Bytes → characters → tokens → nodes → CSSOM

image.png

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

當(dāng)DOM樹和CSSOM都有了后，就要開始構(gòu)建渲染樹了

一般來說，渲染樹和DOM樹相對(duì)應(yīng)的，但不是嚴(yán)格意義上的一一對(duì)應(yīng),因?yàn)橛幸恍┎豢梢姷腄OM元素不會(huì)插入到渲染樹中，如head這種不可見的標(biāo)簽或者display: none等

image.png

4. 布局render樹（Layout/Reflow），負(fù)責(zé)各元素尺寸、位置的計(jì)算

布局：通過渲染樹中渲染對(duì)象的信息，計(jì)算出每一個(gè)渲染對(duì)象的位置和尺寸。

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

繪制階段，系統(tǒng)會(huì)遍歷呈現(xiàn)樹，并調(diào)用呈現(xiàn)器的“paint”方法，將呈現(xiàn)器的內(nèi)容顯示在屏幕上。

image.png

這張圖片中重要的四個(gè)步驟
1. 計(jì)算CSS樣式

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

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

4. 繪制，將圖像繪制出來

• Layout，也稱為Reflow，即回流。一般意味著元素的內(nèi)容、結(jié)構(gòu)、位置或尺寸發(fā)生了變化，需要重新計(jì)算樣式和渲染樹

• Repaint，即重繪。意味著元素發(fā)生的改變只是影響了元素的一些外觀之類的時(shí)候（例如，背景色，邊框顏色，文字顏色等），此時(shí)只需要應(yīng)用新樣式繪制這個(gè)元素就可以了

七、斷開連接

當(dāng)數(shù)據(jù)傳送完畢，需要斷開 tcp 連接，此時(shí)發(fā)起 tcp 四次揮手。

image.png

• 發(fā)起方向被動(dòng)方發(fā)送報(bào)文，F(xiàn)in、Ack、Seq，表示已經(jīng)沒有數(shù)據(jù)傳輸了。并進(jìn)入 FIN_WAIT_1 狀態(tài)。 (第一次揮手：由瀏覽器發(fā)起的，發(fā)送給服務(wù)器，我請(qǐng)求報(bào)文發(fā)送完了，你準(zhǔn)備關(guān)閉吧)

• 被動(dòng)方發(fā)送報(bào)文，Ack、Seq，表示同意關(guān)閉請(qǐng)求。此時(shí)主機(jī)發(fā)起方進(jìn)入 FIN_WAIT_2 狀態(tài)。 (第二次揮手：由服務(wù)器發(fā)起的，告訴瀏覽器，我請(qǐng)求報(bào)文接受完了，我準(zhǔn)備關(guān)閉了，你也準(zhǔn)備吧)

• 被動(dòng)方向發(fā)起方發(fā)送報(bào)文段，F(xiàn)in、Ack、Seq，請(qǐng)求關(guān)閉連接。并進(jìn)入 LAST_ACK 狀態(tài)。 (第三次揮手：由服務(wù)器發(fā)起，告訴瀏覽器，我響應(yīng)報(bào)文發(fā)送完了，你準(zhǔn)備關(guān)閉吧)

• 發(fā)起方向被動(dòng)方發(fā)送報(bào)文段，Ack、Seq。然后進(jìn)入等待 TIME_WAIT 狀態(tài)。被動(dòng)方收到發(fā)起方的報(bào)文段以后關(guān)閉連接。發(fā)起方等待一定時(shí)間未收到回復(fù)，則正常關(guān)閉。 (第四次揮手：由瀏覽器發(fā)起，告訴服務(wù)器，我響應(yīng)報(bào)文接受完了，我準(zhǔn)備關(guān)閉了，你也準(zhǔn)備吧)

參考文章：

• 從輸入U(xiǎn)RL到頁面加載的過程
• TCP/IP協(xié)議
• TCP的三次握手與四次分手
• MDN Web Docs