總體分為一下幾個(gè)過程：

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

URL

URL（Uniform Resource Locatr）摇庙，統(tǒng)一資源定位符，用于定位互聯(lián)網(wǎng)的資源遥缕。俗稱網(wǎng)址

組成部分：scheme://host.domain:port/path/filename卫袒，例如：https://www.lufangyong.com

各部分解釋如下：

• schema: 定義因特網(wǎng)服務(wù)的類型，常見的協(xié)議有 http单匣、https夕凝、ftp宝穗、file，其中最常見的是 http码秉，而 https 則是進(jìn)行加密的網(wǎng)絡(luò)傳輸
• hots：定義域主機(jī)（http 的默認(rèn)主機(jī)是 www）
• domain：定義因特網(wǎng)域名逮矛，比如 www.lufangyong.com
• prot：定義主機(jī)上的端口號(hào)（http 的默認(rèn)端口號(hào)是 80）
• path：定義服務(wù)器上的路徑（如果省略，則文檔必須位于網(wǎng)站的根目錄中）
• filename：定義文檔/資源的名稱

DNS 域名解析

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

什么是域名解析

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

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

瀏覽器如何通過域名去查詢 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)稱杉辙，ISP 有專門的 DNS 服務(wù)器對(duì)應(yīng) DNS 查詢請(qǐng)求
• 根服務(wù)器：ISP 的 DNS 服務(wù)器還找不到的話模捂，它就會(huì)向根服務(wù)器發(fā)出請(qǐng)求，進(jìn)行遞歸查詢（DNS 服務(wù)器先問根域名服務(wù)器 .com 域名服務(wù)器的 IP 地址蜘矢，然后再問 .baidu 域名服務(wù)器狂男，以此類推）

小結(jié)

瀏覽器通過向 DNS 服務(wù)器發(fā)送域名，DNS 服務(wù)器查詢到與域名相對(duì)應(yīng)的 IP 地址品腹，然后返回給瀏覽器岖食，瀏覽器再將 IP 地址打在協(xié)議上，同時(shí)請(qǐng)求參數(shù)也會(huì)在協(xié)議搭載舞吭，然后一并發(fā)送給對(duì)應(yīng)的服務(wù)器泡垃。接下來介紹向服務(wù)器發(fā)送 HTTP 請(qǐng)求階段，HTTP 請(qǐng)求分為三個(gè)部分：TCP 三次握手羡鸥、http 請(qǐng)求響應(yīng)信息蔑穴、關(guān)閉 TCP 連接。

TCP

按層次分惧浴，TCP 位于傳輸層存和，提供可靠的字節(jié)流服務(wù)。

所謂的字節(jié)流服務(wù)（Bety Stream Service）是指衷旅，為了方便傳輸捐腿，將大塊數(shù)據(jù)分割成以報(bào)文（segment）為單位的數(shù)據(jù)包進(jìn)行管理。而可靠的傳輸服務(wù)是指柿顶，能夠把數(shù)據(jù)準(zhǔn)確可靠地傳給對(duì)方茄袖。一言以蔽之，TCP 協(xié)議為了更容易傳送大數(shù)據(jù)才把數(shù)據(jù)分割嘁锯，而且 TCP 協(xié)議能夠確認(rèn)數(shù)據(jù)最終是否送達(dá)到對(duì)方

確保數(shù)據(jù)能達(dá)到目標(biāo)

為了準(zhǔn)確無誤地將數(shù)據(jù)送達(dá)目標(biāo)處绞佩，TCP 協(xié)議采用三次握手（there-way handshaking）策略寺鸥。用 TCP 協(xié)議把數(shù)據(jù)包送出去后，TCP 不會(huì)對(duì)傳送后的情況置之不理品山，它一定會(huì)向?qū)Ψ酱_認(rèn)是否成功送達(dá)胆建。握手過程中使用了 TCP 的標(biāo)志（flag）———— SYN（synchronize）和 ACK（acknowledgement）

發(fā)送端首先發(fā)送一個(gè)帶 SYN 標(biāo)志的數(shù)據(jù)包給對(duì)方。接受端收到后肘交，回傳一個(gè)帶有 SYN/ACK 標(biāo)志的數(shù)據(jù)包以示傳達(dá)確認(rèn)信息笆载。最后，發(fā)送端在回傳一個(gè)帶 ACK 標(biāo)志的數(shù)據(jù)包涯呻，代表 “握手” 結(jié)束

若在握手過程中某個(gè)階段莫名中斷凉驻，TCP 協(xié)議會(huì)再次以相同的順序發(fā)送相同的數(shù)據(jù)包

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

MVC 后臺(tái)處理

瀏覽器解析渲染頁(yè)面

瀏覽器拿到響應(yīng)文本 HTML 后，開始解析渲染頁(yè)面

分為五個(gè)步驟：

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

根據(jù) HTML 解析 DOM 樹

• 根據(jù) HTML 的內(nèi)容涝登，將標(biāo)簽按照結(jié)構(gòu)解析成為 DOM 樹，DOM 樹解析的過程是一個(gè)深度優(yōu)先遍歷效诅。即先構(gòu)建當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)胀滚，再構(gòu)建下一個(gè)節(jié)點(diǎn)。
• 在讀取 HTML 文檔乱投，構(gòu)建 DOM 樹的過程中咽笼，若遇到 script 標(biāo)簽，則 DOM 樹的構(gòu)建會(huì)暫停戚炫，直到腳本執(zhí)行完畢

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

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

結(jié)合 DOM 樹和 CSS 規(guī)則樹，生成渲染樹

• DOM 樹和 CSS 規(guī)則樹全部準(zhǔn)備好了以后双肤，瀏覽器才開始構(gòu)建渲染樹
• 精簡(jiǎn) CSS 并可以加快 CSS 規(guī)則樹的構(gòu)建施掏，從而加快頁(yè)面相應(yīng)速度

根據(jù)渲染樹計(jì)算每一個(gè)節(jié)點(diǎn)的信息

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

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

• 繪制階段：系統(tǒng)會(huì)遍歷呈現(xiàn)樹，并調(diào)用呈現(xiàn)器的 paint 方法限匣，將呈現(xiàn)器的內(nèi)容顯示在屏幕上
• 重繪：某個(gè)元素的背景色抖苦，文字顏色等，不影響元素周圍或內(nèi)部布局的屬性米死，將只會(huì)引起瀏覽器的重繪
• 回流：莫格元素的尺寸發(fā)生了變化锌历，則需重新計(jì)算渲染樹，重新渲染

斷開連接

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

參考資源

從 URL 輸入到頁(yè)面展現(xiàn)到底發(fā)生什么？