總體來(lái)說(shuō)分為以下幾個(gè)過(guò)程:
- DNS解析
- TCP連接
- 發(fā)送HTTP請(qǐng)求
- 服務(wù)器處理請(qǐng)求并返回HTTP報(bào)文
- 瀏覽器解析渲染頁(yè)面
DNS解析
DNS解析是一個(gè)遞歸查詢的過(guò)程。首先在本地域名服務(wù)器中查詢IP地址，如果沒(méi)有找到的情況下，本地域名服務(wù)器會(huì)向根域名服務(wù)器發(fā)送一個(gè)請(qǐng)求，如果根域名服務(wù)器也不存在該域名時(shí)，根域名服務(wù)器會(huì)向頂級(jí)域名服務(wù)器發(fā)送一個(gè)請(qǐng)求，依次類推下去。直到最后本地域名服務(wù)器得到域名對(duì)應(yīng)的IP地址并把它緩存到本地，供下次查詢使用。
DNS緩存：
DNS存在著多級(jí)緩存，從離瀏覽器的距離排序的話，有以下幾種: 瀏覽器緩存，系統(tǒng)緩存，路由器緩存，IPS服務(wù)器緩存，根域名服務(wù)器緩存，頂級(jí)域名服務(wù)器緩存，主域名服務(wù)器緩存。
- 在 chrome 瀏覽器中輸入:chrome://dns/，你可以看到chrome瀏覽器的DNS緩存。
- 系統(tǒng)緩存主要存在/etc/hosts中（Linux系統(tǒng)）。
幾種域名解析方式：
A記錄，A代表的是Address，用來(lái)指定域名對(duì)應(yīng)的IP地址
例如，指定 www.abc.com 的A記錄IP地址為 123.123.123.123
注意：A記錄可以將多個(gè)域名解析到一個(gè)IP地址，但是不能將一個(gè)域名解析到多個(gè)IP地址MX記錄，表示的是Mail Exchange，就是可以將某個(gè)域名下的郵件服務(wù)器指向自己的Mail Server
例如，指定 www.abc.com 的A記錄IP地址為 123.123.123.123，對(duì)應(yīng)的MX設(shè)置為 123.123.123.124，是 xx@abc.com 的郵件路由。
DNS會(huì)將郵件發(fā)送到 123.123.123.124 所在的服務(wù)器，而正常通過(guò)Web請(qǐng)求的話仍然解析到A記錄的IP地址 123.123.123.123。CNAME記錄，全稱是Canonical Name（別名解析），所謂的別名解析就是可以為一個(gè)域名設(shè)置一個(gè)或者多個(gè)別名
例如，將 www.a.com 解析到 www.abc.com，將 b.com 也解析到 www.abc.com，其中 www.abc.com 分別是 www.a.com 和 b.com 的別名。NS記錄，為某個(gè)域名指定DNS解析服務(wù)器，也就是這個(gè)域名由指定的IP地址的DNS服務(wù)器去解析
TXT記錄，為某個(gè)主機(jī)名或域名設(shè)置說(shuō)明
例如，可以為 abc.com 設(shè)置TXT記錄為 “你好 ABC” 這樣的說(shuō)明。
內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）
DNS返回的IP地址是否每次都一樣？No.
DNS可以返回一個(gè)合適的機(jī)器的IP給用戶，例如可以根據(jù)每臺(tái)機(jī)器的負(fù)載量，該機(jī)器離用戶地理位置的距離等等，這種過(guò)程就是DNS負(fù)載均衡，又叫做DNS重定向。
CDN(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)容。
通常，HTML/CSS/JS，圖片和視頻等靜態(tài)內(nèi)容由 CDN 提供。將內(nèi)容存儲(chǔ)在 CDN 上可以從兩個(gè)方面來(lái)提供性能：
- 從靠近用戶的數(shù)據(jù)中心提供資源
- 通過(guò) CDN 你的服務(wù)器不必真的處理請(qǐng)求
CDN 推送（push）
當(dāng)你服務(wù)器上內(nèi)容發(fā)生變動(dòng)時(shí)，推送 CDN 接受新內(nèi)容。直接推送給 CDN 并重寫 URL 地址以指向你的內(nèi)容的 CDN 地址。
例如 www.abc.com/123.jpg 重寫為 www.cdn.com/123.jpg
你可以配置內(nèi)容到期時(shí)間及何時(shí)更新。內(nèi)容只有在更改或新增是才推送，流量最小化，但儲(chǔ)存最大化。
CDN 拉?。╬ull）
CDN 拉取是當(dāng)?shù)谝粋€(gè)用戶請(qǐng)求該資源時(shí)，從服務(wù)器上拉取資源。你將內(nèi)容留在自己的服務(wù)器上并重寫 URL 指向 CDN 地址。直到內(nèi)容被緩存在 CDN 上為止，這樣請(qǐng)求只會(huì)更慢，
存活時(shí)間（TTL）決定緩存多久時(shí)間。CDN 拉取方式最小化 CDN 上的儲(chǔ)存空間，但如果過(guò)期文件并在實(shí)際更改之前被拉取，則會(huì)導(dǎo)致冗余的流量。
高流量站點(diǎn)使用 CDN 拉取效果不錯(cuò)，因?yàn)橹挥凶罱?qǐng)求的內(nèi)容保存在 CDN 中，流量才能更平衡地分散。
CDN的缺點(diǎn)
- CDN 成本可能因流量而異，可能在權(quán)衡之后你將不會(huì)使用 CDN。
- 如果在 TTL 過(guò)期之前更新內(nèi)容，CDN 緩存內(nèi)容可能會(huì)過(guò)時(shí)。
- CDN 需要更改靜態(tài)內(nèi)容的 URL 地址以指向 CDN。
TCP連接
參見 TCP 標(biāo)志位 & 3 次握手 & 4 次握手
發(fā)送HTTP請(qǐng)求
參見 HTTP 請(qǐng)求及響應(yīng)的幾個(gè)步驟
服務(wù)器處理請(qǐng)求并返回HTTP報(bào)文
參見 HTTP 請(qǐng)求及響應(yīng)的幾個(gè)步驟
瀏覽器解析渲染頁(yè)面
瀏覽器在收到HTML,CSS,JS文件后，它是如何把頁(yè)面呈現(xiàn)到屏幕上的？
瀏覽器是一個(gè)邊解析邊渲染的過(guò)程。
首先瀏覽器解析HTML文件構(gòu)建DOM樹，然后解析CSS文件構(gòu)建渲染樹，等到渲染樹構(gòu)建完成后，瀏覽器開始布局渲染樹并將其繪制到屏幕上。這個(gè)過(guò)程比較復(fù)雜，涉及到兩個(gè)概念: reflow(回流)和repaint(重繪)。
- DOM節(jié)點(diǎn)中的各個(gè)元素都是以盒模型的形式存在，這些都需要瀏覽器去計(jì)算其位置和大小等，這個(gè)過(guò)程稱為relow；
- 當(dāng)盒模型的位置,大小以及其他屬性，如顏色,字體,等確定下來(lái)之后，瀏覽器便開始繪制內(nèi)容，這個(gè)過(guò)程稱為repaint。
JS的解析是由瀏覽器中的JS解析引擎完成的。
JS是單線程運(yùn)行，也就是說(shuō)，在同一個(gè)時(shí)間內(nèi)只能做一件事，所有的任務(wù)都需要排隊(duì)，前一個(gè)任務(wù)結(jié)束，后一個(gè)任務(wù)才能開始。但是又存在某些任務(wù)比較耗時(shí)，如IO讀寫等，所以需要一種機(jī)制可以先執(zhí)行排在后面的任務(wù)，這就是：同步任務(wù)(synchronous)和異步任務(wù)(asynchronous)。
JS的執(zhí)行機(jī)制就可以看做是一個(gè)主線程加上一個(gè)任務(wù)隊(duì)列(task queue)。
同步任務(wù)就是放在主線程上執(zhí)行的任務(wù)，異步任務(wù)是放在任務(wù)隊(duì)列中的任務(wù)。
所有的同步任務(wù)在主線程上執(zhí)行，形成一個(gè)執(zhí)行棧；異步任務(wù)有了運(yùn)行結(jié)果就會(huì)在任務(wù)隊(duì)列中放置一個(gè)事件；腳本運(yùn)行時(shí)先依次運(yùn)行執(zhí)行棧，然后會(huì)從任務(wù)隊(duì)列里提取事件，運(yùn)行任務(wù)隊(duì)列中的任務(wù)，這個(gè)過(guò)程是不斷重復(fù)的，所以又叫做事件循環(huán)(Event loop)。
引用：
前端經(jīng)典面試題: 從輸入U(xiǎn)RL到頁(yè)面加載發(fā)生了什么？
WEB請(qǐng)求處理一：瀏覽器請(qǐng)求發(fā)起處理
