前言

打開(kāi)瀏覽器從輸入網(wǎng)址到網(wǎng)頁(yè)呈現(xiàn)在大家面前谈竿，背后到底發(fā)生了什么团驱？經(jīng)歷怎么樣的一個(gè)過(guò)程？先給大家來(lái)張總體流程圖空凸，具體步驟請(qǐng)看下文分解嚎花！

image

總體來(lái)說(shuō)分為以下幾個(gè)過(guò)程:

• DNS 解析:將域名解析成 IP 地址
• TCP 連接：TCP 三次握手
• 發(fā)送 HTTP 請(qǐng)求
• 服務(wù)器處理請(qǐng)求并返回 HTTP 報(bào)文
• 瀏覽器解析渲染頁(yè)面
• 斷開(kāi)連接：TCP 四次揮手

一、URL 到底是啥

URL（Uniform Resource Locator）呀洲，統(tǒng)一資源定位符紊选，用于定位互聯(lián)網(wǎng)上資源，俗稱(chēng)網(wǎng)址道逗。比如 http://www.w3school.com.cn/ht...兵罢，遵守以下的語(yǔ)法規(guī)則：

scheme://host.domain:port/path/filename

各部分解釋如下：

• scheme - 定義因特網(wǎng)服務(wù)的類(lèi)型。常見(jiàn)的協(xié)議有 http滓窍、https卖词、ftp、file吏夯，其中最常見(jiàn)的類(lèi)型是 http此蜈，而 https 則是進(jìn)行加密的網(wǎng)絡(luò)傳輸。
• host - 定義域主機(jī)（http 的默認(rèn)主機(jī)是 www）
• domain - 定義因特網(wǎng)域名噪生，比如 http://w3school.com.cn
• port - 定義主機(jī)上的端口號(hào)（http 的默認(rèn)端口號(hào)是 80）
• path - 定義服務(wù)器上的路徑（如果省略裆赵，則文檔必須位于網(wǎng)站的根目錄中）。
• filename - 定義文檔/資源的名稱(chēng)

二杠园、域名解析（DNS）

在瀏覽器輸入網(wǎng)址后顾瞪，首先要經(jīng)過(guò)域名解析，因?yàn)闉g覽器并不能直接通過(guò)域名找到對(duì)應(yīng)的服務(wù)器抛蚁，而是要通過(guò) IP 地址。大家這里或許會(huì)有個(gè)疑問(wèn)----計(jì)算機(jī)既可以被賦予 IP 地址惕橙，也可以被賦予主機(jī)名和域名瞧甩。比如 www.hackr.jp。那怎么不一開(kāi)始就賦予個(gè) IP 地址弥鹦？這樣就可以省去解析麻煩肚逸。我們先來(lái)了解下什么是 IP 地址

1. IP 地址

IP 地址是指互聯(lián)網(wǎng)協(xié)議地址爷辙，是 IP Address 的縮寫(xiě)。IP 地址是 IP 協(xié)議提供的一種統(tǒng)一的地址格式朦促，它為互聯(lián)網(wǎng)上的每一個(gè)網(wǎng)絡(luò)和每一臺(tái)主機(jī)分配一個(gè)邏輯地址膝晾，以此來(lái)屏蔽物理地址的差異。IP 地址是一個(gè) 32 位的二進(jìn)制數(shù)务冕，比如 127.0.0.1 為本機(jī) IP血当。

域名就相當(dāng)于 IP 地址喬裝打扮的偽裝者，帶著一副面具禀忆。它的作用就是便于記憶和溝通的一組服務(wù)器的地址臊旭。用戶通常使用主機(jī)名或域名來(lái)訪問(wèn)對(duì)方的計(jì)算機(jī)，而不是直接通過(guò) IP 地址訪問(wèn)箩退。因?yàn)榕c IP 地址的一組純數(shù)字相比离熏，用字母配合數(shù)字的表示形式來(lái)指定計(jì)算機(jī)名更符合人類(lèi)的記憶習(xí)慣。但要讓計(jì)算機(jī)去理解名稱(chēng)戴涝，相對(duì)而言就變得困難了滋戳。因?yàn)橛?jì)算機(jī)更擅長(zhǎng)處理一長(zhǎng)串?dāng)?shù)字。為了解決上述的問(wèn)題啥刻，DNS 服務(wù)應(yīng)運(yùn)而生奸鸯。

2. 什么是域名解析

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

例如 baidu.com  220.114.23.56（服務(wù)器外網(wǎng)IP地址）80（服務(wù)器端口號(hào)）

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

• 瀏覽器緩存：瀏覽器會(huì)按照一定的頻率緩存 DNS 記錄蘑拯。
• 操作系統(tǒng)緩存：如果瀏覽器緩存中找不到需要的 DNS 記錄钝满，那就去操作系統(tǒng)中找。
• 路由緩存：路由器也有 DNS 緩存申窘。
• ISP 的 DNS 服務(wù)器：ISP 是互聯(lián)網(wǎng)服務(wù)提供商(Internet Service Provider)的簡(jiǎn)稱(chēng)弯蚜，ISP 有專(zhuān)門(mén)的 DNS 服務(wù)器應(yīng)對(duì) DNS 查詢請(qǐng)求。
• 根服務(wù)器：ISP 的 DNS 服務(wù)器還找不到的話剃法，它就會(huì)向根服務(wù)器發(fā)出請(qǐng)求碎捺，進(jìn)行遞歸查詢（DNS 服務(wù)器先問(wèn)根域名服務(wù)器.com 域名服務(wù)器的 IP 地址，然后再問(wèn).baidu 域名服務(wù)器贷洲，依次類(lèi)推）

image

4. 小結(jié)

瀏覽器通過(guò)向 DNS 服務(wù)器發(fā)送域名收厨，DNS 服務(wù)器查詢到與域名相對(duì)應(yīng)的 IP 地址，然后返回給瀏覽器优构，瀏覽器再將 IP 地址打在協(xié)議上诵叁，同時(shí)請(qǐng)求參數(shù)也會(huì)在協(xié)議搭載，然后一并發(fā)送給對(duì)應(yīng)的服務(wù)器钦椭。接下來(lái)介紹向服務(wù)器發(fā)送 HTTP 請(qǐng)求階段拧额，HTTP 請(qǐng)求分為三個(gè)部分：TCP 三次握手碑诉、http 請(qǐng)求響應(yīng)信息、關(guān)閉 TCP 連接侥锦。

image

三进栽、TCP 三次握手

在客戶端發(fā)送數(shù)據(jù)之前會(huì)發(fā)起 TCP 三次握手用以同步客戶端和服務(wù)端的序列號(hào)和確認(rèn)號(hào)，并交換 TCP 窗口大小信息恭垦。

image

1. TCP 三次握手的過(guò)程如下：

• 客戶端發(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)備接受吧）

2. 為啥需要三次握手

謝希仁著《計(jì)算機(jī)網(wǎng)絡(luò)》中講“三次握手”的目的是“為了防止已失效的連接請(qǐng)求報(bào)文段突然又傳送到了服務(wù)端映砖，因而產(chǎn)生錯(cuò)誤”间坐。

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

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

請(qǐng)求報(bào)文由請(qǐng)求行（request line）、請(qǐng)求頭（header）地技、請(qǐng)求體三個(gè)部分組成,如下圖所示：

image

1. 請(qǐng)求行包含請(qǐng)求方法蜈七、URL、協(xié)議版本

• 請(qǐng)求方法包含 8 種：GET莫矗、POST飒硅、PUT、DELETE作谚、PATCH三娩、HEAD、OPTIONS妹懒、TRACE尽棕。
• URL 即請(qǐng)求地址，由 <協(xié)議>：//<主機(jī)>：<端口>/<路徑>?<參數(shù)> 組成
• 協(xié)議版本即 http 版本號(hào)

POST /chapter17/user.html HTTP/1.1

以上代碼中“POST”代表請(qǐng)求方法彬伦，“/chapter17/user.html”表示 URL滔悉，“HTTP/1.1”代表協(xié)議和協(xié)議的版本。現(xiàn)在比較流行的是 Http1.1 版本

2. 請(qǐng)求頭包含請(qǐng)求的附加信息单绑，由關(guān)鍵字/值對(duì)組成回官，每行一對(duì)，關(guān)鍵字和值用英文冒號(hào)“:”分隔搂橙。

請(qǐng)求頭部通知服務(wù)器有關(guān)于客戶端請(qǐng)求的信息歉提。它包含許多有關(guān)的客戶端環(huán)境和請(qǐng)求正文的有用信息。其中比如：Host区转，表示主機(jī)名苔巨，虛擬主機(jī)；Connection,HTTP/1.1 增加的废离，使用 keepalive侄泽，即持久連接，一個(gè)連接可以發(fā)多個(gè)請(qǐng)求蜻韭；User-Agent悼尾，請(qǐng)求發(fā)出者，兼容性以及定制化需求肖方。

3. 請(qǐng)求體闺魏，可以承載多個(gè)請(qǐng)求參數(shù)的數(shù)據(jù)，包含回車(chē)符俯画、換行符和請(qǐng)求數(shù)據(jù)析桥，并不是所有請(qǐng)求都具有請(qǐng)求數(shù)據(jù)。

name=tom&password=1234&realName=tomson

上面代碼艰垂，承載著 name泡仗、password、realName 三個(gè)請(qǐng)求參數(shù)材泄。

給大家推薦一個(gè)好用的 BUG 監(jiān)控工具Fundebug沮焕，歡迎免費(fèi)試用！

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

1. 服務(wù)器

服務(wù)器是網(wǎng)絡(luò)環(huán)境中的高性能計(jì)算機(jī)峦树，它偵聽(tīng)網(wǎng)絡(luò)上的其他計(jì)算機(jī)（客戶機(jī)）提交的服務(wù)請(qǐng)求，并提供相應(yīng)的服務(wù)旦事，比如網(wǎng)頁(yè)服務(wù)魁巩、文件下載服務(wù)、郵件服務(wù)姐浮、視頻服務(wù)谷遂。而客戶端主要的功能是瀏覽網(wǎng)頁(yè)、看視頻卖鲤、聽(tīng)音樂(lè)等等肾扰，兩者截然不同畴嘶。 每臺(tái)服務(wù)器上都會(huì)安裝處理請(qǐng)求的應(yīng)用——web server。常見(jiàn)的 web server 產(chǎn)品有 apache集晚、nginx窗悯、IIS 或 Lighttpd 等。 web server 擔(dān)任管控的角色偷拔，對(duì)于不同用戶發(fā)送的請(qǐng)求蒋院，會(huì)結(jié)合配置文件，把不同請(qǐng)求委托給服務(wù)器上處理相應(yīng)請(qǐng)求的程序進(jìn)行處理（例如 CGI 腳本莲绰，JSP 腳本欺旧，servlets，ASP 腳本蛤签，服務(wù)器端 JavaScript辞友，或者一些其它的服務(wù)器端技術(shù)等），然后返回后臺(tái)程序處理產(chǎn)生的結(jié)果作為響應(yīng)顷啼。

image

2. MVC 后臺(tái)處理階段

后臺(tái)開(kāi)發(fā)現(xiàn)在有很多框架踏枣，但大部分都還是按照 MVC 設(shè)計(jì)模式進(jìn)行搭建的。

MVC 是一個(gè)設(shè)計(jì)模式钙蒙，將應(yīng)用程序分成三個(gè)核心部件：模型（model）-- 視圖（view）--控制器（controller）茵瀑，它們各自處理自己的任務(wù)，實(shí)現(xiàn)輸入躬厌、處理和輸出的分離马昨。

image

1、視圖（view）

它是提供給用戶的操作界面扛施，是程序的外殼鸿捧。

2、模型（model）

模型主要負(fù)責(zé)數(shù)據(jù)交互疙渣。在 MVC 的三個(gè)部件中匙奴，模型擁有最多的處理任務(wù)。一個(gè)模型能為多個(gè)視圖提供數(shù)據(jù)妄荔。

3泼菌、控制器（controller）

它負(fù)責(zé)根據(jù)用戶從"視圖層"輸入的指令，選取"模型層"中的數(shù)據(jù)啦租，然后對(duì)其進(jìn)行相應(yīng)的操作哗伯，產(chǎn)生最終結(jié)果。控制器屬于管理者角色篷角，從視圖接收請(qǐng)求并決定調(diào)用哪個(gè)模型構(gòu)件去處理請(qǐng)求焊刹，然后再確定用哪個(gè)視圖來(lái)顯示模型處理返回的數(shù)據(jù)。

這三層是緊密聯(lián)系在一起的，但又是互相獨(dú)立的虐块，每一層內(nèi)部的變化不影響其他層俩滥。每一層都對(duì)外提供接口（Interface），供上面一層調(diào)用非凌。

至于這一階段發(fā)生什么举农？簡(jiǎn)而言之，首先瀏覽器發(fā)送過(guò)來(lái)的請(qǐng)求先經(jīng)過(guò)控制器敞嗡，控制器進(jìn)行邏輯處理和請(qǐng)求分發(fā)，接著會(huì)調(diào)用模型航背，這一階段模型會(huì)獲取 redis db 以及 MySQL 的數(shù)據(jù)喉悴，獲取數(shù)據(jù)后將渲染好的頁(yè)面，響應(yīng)信息會(huì)以響應(yīng)報(bào)文的形式返回給客戶端玖媚，最后瀏覽器通過(guò)渲染引擎將網(wǎng)頁(yè)呈現(xiàn)在用戶面前箕肃。

3. http 響應(yīng)報(bào)文

響應(yīng)報(bào)文由響應(yīng)行（request line）、響應(yīng)頭部（header）今魔、響應(yīng)主體三個(gè)部分組成勺像。如下圖所示：

image

(1) 響應(yīng)行包含：協(xié)議版本，狀態(tài)碼错森，狀態(tài)碼描述

狀態(tài)碼規(guī)則如下：

• 1xx：指示信息--表示請(qǐng)求已接收吟宦，繼續(xù)處理。
• 2xx：成功--表示請(qǐng)求已被成功接收涩维、理解殃姓、接受。
• 3xx：重定向--要完成請(qǐng)求必須進(jìn)行更進(jìn)一步的操作瓦阐。
• 4xx：客戶端錯(cuò)誤--請(qǐng)求有語(yǔ)法錯(cuò)誤或請(qǐng)求無(wú)法實(shí)現(xiàn)蜗侈。
• 5xx：服務(wù)器端錯(cuò)誤--服務(wù)器未能實(shí)現(xiàn)合法的請(qǐng)求。

(2) 響應(yīng)頭部包含響應(yīng)報(bào)文的附加信息睡蟋，由 名/值 對(duì)組成

(3) 響應(yīng)主體包含回車(chē)符踏幻、換行符和響應(yīng)返回?cái)?shù)據(jù)，并不是所有響應(yīng)報(bào)文都有響應(yīng)數(shù)據(jù)

六戳杀、瀏覽器解析渲染頁(yè)面

瀏覽器拿到響應(yīng)文本 HTML 后该面，接下來(lái)介紹下瀏覽器渲染機(jī)制

image

瀏覽器解析渲染頁(yè)面分為一下五個(gè)步驟：

• 根據(jù) HTML 解析出 DOM 樹(shù)
• 根據(jù) CSS 解析生成 CSS 規(guī)則樹(shù)
• 結(jié)合 DOM 樹(shù)和 CSS 規(guī)則樹(shù)，生成渲染樹(shù)
• 根據(jù)渲染樹(shù)計(jì)算每一個(gè)節(jié)點(diǎn)的信息
• 根據(jù)計(jì)算好的信息繪制頁(yè)面

1. 根據(jù) HTML 解析 DOM 樹(shù)

• 根據(jù) HTML 的內(nèi)容豺瘤，將標(biāo)簽按照結(jié)構(gòu)解析成為 DOM 樹(shù)吆倦，DOM 樹(shù)解析的過(guò)程是一個(gè)深度優(yōu)先遍歷。即先構(gòu)建當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)坐求，再構(gòu)建下一個(gè)兄弟節(jié)點(diǎn)蚕泽。
• 在讀取 HTML 文檔，構(gòu)建 DOM 樹(shù)的過(guò)程中，若遇到 script 標(biāo)簽须妻，則 DOM 樹(shù)的構(gòu)建會(huì)暫停仔蝌，直至腳本執(zhí)行完畢。

2. 根據(jù) CSS 解析生成 CSS 規(guī)則樹(shù)

• 解析 CSS 規(guī)則樹(shù)時(shí) js 執(zhí)行將暫停荒吏，直至 CSS 規(guī)則樹(shù)就緒敛惊。
• 瀏覽器在 CSS 規(guī)則樹(shù)生成之前不會(huì)進(jìn)行渲染。

3. 結(jié)合 DOM 樹(shù)和 CSS 規(guī)則樹(shù)绰更，生成渲染樹(shù)

• DOM 樹(shù)和 CSS 規(guī)則樹(shù)全部準(zhǔn)備好了以后瞧挤，瀏覽器才會(huì)開(kāi)始構(gòu)建渲染樹(shù)。
• 精簡(jiǎn) CSS 并可以加快 CSS 規(guī)則樹(shù)的構(gòu)建儡湾，從而加快頁(yè)面相應(yīng)速度特恬。

4. 根據(jù)渲染樹(shù)計(jì)算每一個(gè)節(jié)點(diǎn)的信息（布局）

• 布局：通過(guò)渲染樹(shù)中渲染對(duì)象的信息，計(jì)算出每一個(gè)渲染對(duì)象的位置和尺寸
• 回流：在布局完成后徐钠，發(fā)現(xiàn)了某個(gè)部分發(fā)生了變化影響了布局癌刽，那就需要倒回去重新渲染。

5. 根據(jù)計(jì)算好的信息繪制頁(yè)面

• 繪制階段尝丐，系統(tǒng)會(huì)遍歷呈現(xiàn)樹(shù)显拜，并調(diào)用呈現(xiàn)器的“paint”方法，將呈現(xiàn)器的內(nèi)容顯示在屏幕上爹袁。
• 重繪：某個(gè)元素的背景顏色远荠，文字顏色等，不影響元素周?chē)騼?nèi)部布局的屬性呢簸，將只會(huì)引起瀏覽器的重繪矮台。
• 回流：某個(gè)元素的尺寸發(fā)生了變化，則需重新計(jì)算渲染樹(shù)根时，重新渲染瘦赫。

七、斷開(kāi)連接

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

image

• 發(fā)起方向被動(dòng)方發(fā)送報(bào)文替裆，F(xiàn)in校辩、Ack、Seq辆童，表示已經(jīng)沒(méi)有數(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)備吧)