1.URL是什么？

URL：統(tǒng)一資源定位符蒿讥，用于定位互聯(lián)網(wǎng)上的資源蝶念。

統(tǒng)一資源定位符是對(duì)可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問(wèn)方法的一種簡(jiǎn)潔的表示，是互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址芋绸∶窖常互聯(lián)網(wǎng)上的每個(gè)文件都有一個(gè)唯一的URL，它包含的信息指出文件的位置以及瀏覽器應(yīng)該怎么處理它摔敛。

而https://www.baidu.com/正是這樣一個(gè)URL廷蓉，當(dāng)我們?cè)诘刂窓谥休斎?a target="_blank" rel="nofollow">https://www.baidu.com/并按下回車后，DNS服務(wù)器（域名解析系統(tǒng)）會(huì)根據(jù)用戶提供的域名查找對(duì)應(yīng)的IP地址马昙。

域名：以百度為例桃犬，baidu.com就是一個(gè)域名，大多數(shù)情況下行楞，我們輸入網(wǎng)址都是輸入它的域名攒暇，相比輸入IP地址或者一整串URL來(lái)說(shuō)，輸入域名會(huì)更加方便子房。

客戶端收到你輸入的域名地址后形用，它首先去找本地的hosts文件就轧，檢查在該文件中是否有相應(yīng)的域名、IP對(duì)應(yīng)關(guān)系尾序，如果有钓丰，則向其IP地址發(fā)送請(qǐng)求躯砰，如果沒(méi)有每币，再去找DNS服務(wù)器。一般用戶很少去編輯修改hosts文件琢歇。

瀏覽器客戶端向本地DNS服務(wù)器發(fā)送一個(gè)含有域名www.baidu.com的DNS查詢報(bào)文兰怠。本地DNS服務(wù)器把查詢報(bào)文轉(zhuǎn)發(fā)到根DNS服務(wù)器，根DNS服務(wù)器注意到其com后綴李茫，于是向本地DNS服務(wù)器返回comDNS服務(wù)器的IP地址揭保。本地DNS服務(wù)器再次向comDNS服務(wù)器發(fā)送查詢請(qǐng)求，comDNS服務(wù)器注意到其www.baidu.com后綴并用負(fù)責(zé)該域名的權(quán)威DNS服務(wù)器的IP地址作為回應(yīng)魄宏。最后秸侣，本地DNS服務(wù)器將含有www.baidu.com的IP地址的響應(yīng)報(bào)文發(fā)送給客戶端。

2.建立TCP連接

費(fèi)了一頓周折終于拿到服務(wù)器IP了宠互，下一步自然就是鏈接到該服務(wù)器味榛。對(duì)于客戶端與服務(wù)器的TCP鏈接，必然要說(shuō)的就是『三次握手』予跌。

三次握手

客戶端發(fā)送一個(gè)帶有SYN標(biāo)志的數(shù)據(jù)包給服務(wù)端搏色，服務(wù)端收到后，回傳一個(gè)帶有SYN/ACK標(biāo)志的數(shù)據(jù)包以示傳達(dá)確認(rèn)信息券册，最后客戶端再回傳一個(gè)帶ACK標(biāo)志的數(shù)據(jù)包频轿，代表握手結(jié)束，連接成功烁焙。

上圖也可以這么理解：
客戶端：“你好航邢，在家不，有你快遞骄蝇∩乓螅”
服務(wù)端：“在的，送來(lái)就行乞榨』嘀”
客戶端：“好嘞〕约龋”

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

與服務(wù)器建立了連接后考榨，就可以向服務(wù)器發(fā)起請(qǐng)求了。這里我們先看下請(qǐng)求報(bào)文的結(jié)構(gòu)（如下圖）：

請(qǐng)求報(bào)文

在瀏覽器中查看報(bào)文首部（以google瀏覽器為例）：

請(qǐng)求行包括請(qǐng)求方法鹦倚、URI河质、HTTP版本辕坝。首部字段傳遞重要信息驳癌，包括請(qǐng)求首部字段、通用首部字段和實(shí)體首部字段。我們可以從報(bào)文中看到發(fā)出的請(qǐng)求的具體信息六剥。具體每個(gè)首部字段的作用，這里不做過(guò)多闡述深纲。

4.服務(wù)器處理請(qǐng)求

服務(wù)器端收到請(qǐng)求后的由web服務(wù)器（準(zhǔn)確說(shuō)應(yīng)該是http服務(wù)器）處理請(qǐng)求劫灶，諸如Apache、Ngnix扔嵌、IIS等限府。web服務(wù)器解析用戶請(qǐng)求，知道了需要調(diào)度哪些資源文件痢缎，再通過(guò)相應(yīng)的這些資源文件處理用戶請(qǐng)求和參數(shù)胁勺，并調(diào)用數(shù)據(jù)庫(kù)信息，最后將結(jié)果通過(guò)web服務(wù)器返回給瀏覽器客戶端独旷。

服務(wù)器處理請(qǐng)求

5.返回響應(yīng)結(jié)果

在HTTP里署穗，有請(qǐng)求就會(huì)有響應(yīng)，哪怕是錯(cuò)誤信息嵌洼。這里我們同樣看下響應(yīng)報(bào)文的組成結(jié)構(gòu)：

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

在響應(yīng)結(jié)果中都會(huì)有個(gè)一個(gè)HTTP狀態(tài)碼案疲，比如我們熟知的200、301咱台、404络拌、500等。通過(guò)這個(gè)狀態(tài)碼我們可以知道服務(wù)器端的處理是否正常回溺，并能了解具體的錯(cuò)誤春贸。

狀態(tài)碼由3位數(shù)字和原因短語(yǔ)組成。根據(jù)首位數(shù)字遗遵，狀態(tài)碼可以分為五類：

狀態(tài)碼類別

6.關(guān)閉TCP連接

為了避免服務(wù)器與客戶端雙方的資源占用和損耗萍恕，當(dāng)雙方?jīng)]有請(qǐng)求或響應(yīng)傳遞時(shí)，任意一方都可以發(fā)起關(guān)閉請(qǐng)求车要。與創(chuàng)建TCP連接的3次握手類似允粤，關(guān)閉TCP連接，需要4次握手翼岁。

上圖可以這么理解：
客戶端：“兄弟类垫，我這邊沒(méi)數(shù)據(jù)要傳了，咱關(guān)閉連接吧琅坡∠せ迹”
服務(wù)端：“收到，我看看我這邊有木有數(shù)據(jù)了榆俺∈墼辏”
服務(wù)端：“兄弟坞淮，我這邊也沒(méi)數(shù)據(jù)要傳你了，咱可以關(guān)閉連接了陪捷』鼐剑”
客戶端：“好嘞∈行洌”

7.瀏覽器解析HTML

準(zhǔn)確地說(shuō)啡直，瀏覽器需要加載解析的不僅僅是HTML，還包括CSS凌盯、JS付枫。以及還要加載圖片、視頻等其他媒體資源驰怎。

瀏覽器通過(guò)解析HTML，生成DOM樹(shù)二打，解析CSS县忌，生成CSS規(guī)則樹(shù)，然后通過(guò)DOM樹(shù)和CSS規(guī)則樹(shù)生成渲染樹(shù)继效。渲染樹(shù)與DOM樹(shù)不同症杏，渲染樹(shù)中并沒(méi)有head、display為none等不必顯示的節(jié)點(diǎn)瑞信。

要注意的是厉颤，瀏覽器的解析過(guò)程并非是串連進(jìn)行的，比如在解析CSS的同時(shí)凡简，可以繼續(xù)加載解析HTML逼友，但在解析執(zhí)行JS腳本時(shí)，會(huì)停止解析后續(xù)HTML秤涩，這就會(huì)出現(xiàn)阻塞問(wèn)題帜乞，關(guān)于JS阻塞相關(guān)問(wèn)題，這里不過(guò)多闡述筐眷。

8.瀏覽器布局渲染

根據(jù)渲染樹(shù)布局黎烈，計(jì)算CSS樣式，即每個(gè)節(jié)點(diǎn)在頁(yè)面中的大小和位置等幾何信息匀谣。HTML默認(rèn)是流式布局的照棋，CSS和js會(huì)打破這種布局，改變DOM的外觀樣式以及大小和位置武翎。這時(shí)就要提到兩個(gè)重要概念：repaint和reflow烈炭。

repaint：屏幕的一部分重畫(huà)，不影響整體布局后频，比如某個(gè)CSS的背景色變了梳庆，但元素的幾何尺寸和位置不變暖途。
reflow： 意味著元件的幾何尺寸變了，我們需要重新驗(yàn)證并計(jì)算渲染樹(shù)膏执。是渲染樹(shù)的一部分或全部發(fā)生了變化驻售。這就是Reflow，或是Layout更米。

所以我們應(yīng)該盡量減少reflow和repaint欺栗，我想這也是為什么現(xiàn)在很少有用table布局的原因之一。

最后瀏覽器繪制各個(gè)節(jié)點(diǎn)征峦，將頁(yè)面展示給用戶迟几。

參考：
https://www.xuecaijie.com/it/157.html
http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/
http://taligarsiel.com/Projects/howbrowserswork1.htm
https://www.zhihu.com/question/34873227