最近在刷前端的筆試和面試題的時(shí)候，經(jīng)常遇到讓簡(jiǎn)述一下“從頁(yè)面請(qǐng)求到后端響應(yīng)再到頁(yè)面呈現(xiàn)的整個(gè)過(guò)程”的問(wèn)題。于是自己通過(guò)查找相關(guān)大牛的博文后汰翠，決定自己動(dòng)手總結(jié)一下，以便以后復(fù)習(xí)之用跑筝。
本文總結(jié)主要借鑒自阮一峰的互聯(lián)網(wǎng)協(xié)議入門（一）、互聯(lián)網(wǎng)協(xié)議入門（二）瞒滴、DNS 原理入門。
正文開(kāi)始
其實(shí)在我看來(lái)赞警，不管是前端開(kāi)發(fā)還是后端開(kāi)發(fā)的工程師都應(yīng)該了解這個(gè)過(guò)程妓忍，了解這個(gè)過(guò)程可以讓你整體把握整個(gè)軟件的運(yùn)行流程，同時(shí)可以讓你更好地理解一些前后端優(yōu)化愧旦、SEO世剖，甚至一些網(wǎng)絡(luò)安全的問(wèn)題。
要想講清楚“網(wǎng)絡(luò)請(qǐng)求的整個(gè)過(guò)程”的話笤虫，其中涉及到的網(wǎng)絡(luò)基礎(chǔ)旁瘫、HTTP協(xié)議、瀏覽器的工作原理等都應(yīng)該是必備的知識(shí)儲(chǔ)備琼蚯，接下來(lái)的文章中酬凳，我也會(huì)在講清楚整個(gè)請(qǐng)求過(guò)程的同時(shí)穿插補(bǔ)充這些相關(guān)知識(shí)，已經(jīng)對(duì)這些知識(shí)有了解和深入研究的同學(xué)可以權(quán)當(dāng)復(fù)習(xí)了遭庶。
DNS解析
當(dāng)我們?cè)诳蛻舳耍g覽器）的地址欄輸入一個(gè)網(wǎng)址并敲回車的時(shí)候宁仔，首先會(huì)執(zhí)行的一步操作的就是DNS解析（也叫域名解析）。那什么是DNS解析呢峦睡？又為什么要進(jìn)行DNS解析呢翎苫？帶著這兩個(gè)問(wèn)題，我們來(lái)看看DNS解析榨了。
DNS（域名系統(tǒng)）
1.DNS是什么煎谍？
DNS：Domain Name System（域名系統(tǒng)），互聯(lián)網(wǎng)上作為域名和IP地址相互映射的一個(gè)分布式數(shù)據(jù)庫(kù)龙屉。注意呐粘，我加粗了兩個(gè)詞“相互映射”和“數(shù)據(jù)庫(kù)”，稍后再解釋為什么要加粗它倆。
2.為什么要DNS解析事哭？
看了DNS的概念漫雷，有些同學(xué)可能覺(jué)著更加迷惑了，不要著急鳍咱，咱們從DNS解析的過(guò)程方面來(lái)更好地了解它降盹。要講DNS的解析過(guò)程，首先咱們得先來(lái)了解一下計(jì)算機(jī)之間是怎樣進(jìn)行通信的谤辜。
兩臺(tái)電腦之間通信
有兩臺(tái)電腦A和B蓄坏，A電腦想向B電腦發(fā)送一條信息，那該怎么辦呢丑念？
其實(shí)很簡(jiǎn)單涡戳，就像郵遞員（假設(shè)為電腦A）要給某棟大樓內(nèi)的某個(gè)房間的客戶（假設(shè)為電腦B）送郵件一樣，郵遞員要想把郵件送到客戶手上脯倚，那他必須知道客戶的大樓名稱（或者說(shuō)地址）以及客戶在這棟大樓內(nèi)的房間號(hào)渔彰。在互聯(lián)網(wǎng)的世界中也是一樣，電腦A想向電腦B發(fā)送一條信息推正，電腦A就得知道電腦B的MAC地址和IP地址恍涂。
補(bǔ)充1：MAC地址
以太網(wǎng)規(guī)定，連入網(wǎng)絡(luò)的所有設(shè)備植榕，都必須具有“網(wǎng)卡”接口再沧。數(shù)據(jù)包必須是從一塊網(wǎng)卡，傳送到另一塊網(wǎng)卡尊残。網(wǎng)卡的地址炒瘸，就是數(shù)據(jù)包的發(fā)送地址和接收地址，這叫做MAC地址寝衫。
就是說(shuō)要想上網(wǎng)就得有塊叫做“網(wǎng)卡”的東西顷扩，電腦的網(wǎng)卡很好理解，大家經(jīng)常接觸竞端；而像路由器屎即，交換機(jī)，手機(jī)事富，平板等聯(lián)網(wǎng)的設(shè)備都有“網(wǎng)卡”這個(gè)東西技俐。而兩臺(tái)設(shè)備（也可以理解為電腦）之間的通信就相當(dāng)于兩塊網(wǎng)卡之間的通信，而這個(gè)網(wǎng)卡就是MAC地址统台，MAC地址就相當(dāng)于“送郵件”例子中的客戶房間號(hào)（啰嗦了一下雕擂，怕新手看不懂）。
而每塊網(wǎng)卡出廠的時(shí)候贱勃，都有一個(gè)全世界獨(dú)一無(wú)二的MAC地址井赌，長(zhǎng)度是48個(gè)二進(jìn)制位谤逼，通常用12個(gè)十六進(jìn)制數(shù)表示。
前6個(gè)十六進(jìn)制數(shù)是廠商編號(hào)仇穗，后6個(gè)是該廠商的網(wǎng)卡流水號(hào)流部。有了MAC地址，就可以定位網(wǎng)卡和數(shù)據(jù)包的路徑了纹坐。
至于IP地址就不用再補(bǔ)充了吧枝冀，既然學(xué)計(jì)算機(jī)了，肯定知道IP地址耘子。IP地址就相當(dāng)于“送郵件”例子中的大樓名稱（或者說(shuō)地址）果漾。
總結(jié)：A電腦想向B電腦發(fā)送一條信息，首先A電腦要知道B電腦的MAC地址和IP地址谷誓，這其中IP地址一般是已知的绒障，而MAC地址是未知的。這時(shí)候就需要通過(guò)ARP協(xié)議來(lái)確定B電腦的MAC地址捍歪，這其實(shí)也包括兩種情況（不做詳細(xì)介紹户辱，更多了解請(qǐng)看阮一峰的互聯(lián)網(wǎng)協(xié)議入門（一））。只要拿到了電腦B的IP地址和MAC地址糙臼，兩臺(tái)電腦就可以通信了焕妙。
域名出現(xiàn)
上面講到一臺(tái)電腦要想和另一臺(tái)通信就需要知道另一臺(tái)電腦的IP地址和MAC地址，MAC地址未知但可以通過(guò)ARP協(xié)議去獲取弓摘，而IP地址是事先知道的，所以就可以通信了痕届。但是韧献，大家都知道IP地址這個(gè)東西是個(gè)由32位二進(jìn)制組成的網(wǎng)絡(luò)地址（IPv4），即使習(xí)慣上把它表示為四段十進(jìn)制的形式（如202.201.112.232）研叫，也是不好記憶的锤窑，所以神通廣大的人類就發(fā)明了域名來(lái)代替IP地址，其實(shí)就是給IP地址起了一個(gè)別名嚷炉，這樣就解決了IP地址不好記憶的問(wèn)題了渊啰。
任何一個(gè)域名都對(duì)應(yīng)一個(gè)或者多個(gè)ip地址，但是大部分都是一個(gè)域名對(duì)應(yīng)一個(gè)ip地址申屹。
DNS小結(jié)
現(xiàn)在咱們?cè)賮?lái)看最初的問(wèn)題:
DNS：Domain Name System（域名系統(tǒng)）绘证，互聯(lián)網(wǎng)上作為域名和IP地址相互映射的一個(gè)分布式數(shù)據(jù)庫(kù)。
現(xiàn)在應(yīng)該明白了吧哗讥，域名系統(tǒng)就是儲(chǔ)存IP地址和域名映射的一個(gè)數(shù)據(jù)庫(kù)嚷那。而DNS解析，就是通過(guò)這個(gè)數(shù)據(jù)庫(kù)去查找到可以使兩臺(tái)聯(lián)網(wǎng)設(shè)備進(jìn)行通信的IP地址的一個(gè)過(guò)程杆煞。當(dāng)然這個(gè)過(guò)程是非常的繁瑣的魏宽，想繼續(xù)深入研究的同學(xué)可以查看阮一峰的DNS 原理入門腐泻，現(xiàn)在你可以回答最初前面提到的那個(gè)問(wèn)題了。
DNS是什么队询？
又為什么需要DNS解析派桩？
HTTP請(qǐng)求
當(dāng)兩臺(tái)聯(lián)網(wǎng)設(shè)備通過(guò)IP地址和MAC地址完成了“鏈接”之后，接下來(lái)就是通信了蚌斩，而通信就需要傳輸數(shù)據(jù)（哪怕只是一個(gè)沒(méi)有數(shù)據(jù)的請(qǐng)求）铆惑。要想傳輸數(shù)據(jù)，就需要建立一個(gè)傳輸數(shù)據(jù)的鏈接（注意凳寺，我前面的鏈接加了引號(hào)鸭津，是因?yàn)槟莻€(gè)時(shí)候兩臺(tái)電腦并為真正意義是的鏈接，只是找到對(duì)方了）肠缨。而這就牽扯到了另一個(gè)面試官常問(wèn)的問(wèn)題TCP的三次握手和TCP的四次揮手逆趋。
補(bǔ)充2：端口
首先來(lái)說(shuō)，UDP和TCP都是傳輸層的協(xié)議晒奕，不同點(diǎn)就是傳輸?shù)姆绞讲煌ê?jiǎn)單的說(shuō)闻书，后面會(huì)詳細(xì)說(shuō)明他們的不同點(diǎn)）。
咱們?cè)谇懊娑啻翁岬竭^(guò)通過(guò)IP地址和MAC地址可以建立兩臺(tái)電腦的“鏈接”脑慧，那么鏈接以后魄眉，應(yīng)該怎樣就行數(shù)據(jù)的傳輸呢？傳輸?shù)臄?shù)據(jù)是哪一個(gè)程序需要的呢（例如：同一臺(tái)主機(jī)上有許多程序都需要用到網(wǎng)絡(luò)闷袒，比如坑律，你一邊瀏覽網(wǎng)頁(yè)，一邊與朋友在線聊天囊骤。當(dāng)一個(gè)數(shù)據(jù)包從互聯(lián)網(wǎng)上發(fā)來(lái)的時(shí)候晃择，你怎么知道，它是表示網(wǎng)頁(yè)的內(nèi)容也物，還是表示在線聊天的內(nèi)容宫屠？）？于是人們發(fā)明了一個(gè)叫做“端口”的參數(shù)來(lái)區(qū)別不同程序之間的通信滑蚯。
"端口"是0到65535之間的一個(gè)整數(shù)浪蹂，正好16個(gè)二進(jìn)制位。0到1023的端口被系統(tǒng)占用告材，用戶只能選用大于1023的端口坤次。不管是瀏覽網(wǎng)頁(yè)還是在線聊天，應(yīng)用程序會(huì)隨機(jī)選用一個(gè)端口斥赋，然后與服務(wù)器的相應(yīng)端口聯(lián)系浙踢。
這樣就可以進(jìn)行數(shù)據(jù)的傳輸了。
UDP協(xié)議
UDP協(xié)議簡(jiǎn)單來(lái)說(shuō)就是在數(shù)據(jù)包中插入一段數(shù)據(jù)用來(lái)標(biāo)記端口信息灿渴，然后將數(shù)據(jù)發(fā)送出去洛波，至于發(fā)送出去的數(shù)據(jù)包有沒(méi)有被目標(biāo)設(shè)備接收到胰舆，它就不管了。以這種方式發(fā)送數(shù)據(jù)包的有點(diǎn)就是簡(jiǎn)單蹬挤，容易實(shí)現(xiàn)缚窿，但是缺點(diǎn)就是可靠性差，因?yàn)橥ㄟ^(guò)UDP協(xié)議發(fā)送出去的數(shù)據(jù)包無(wú)法確定發(fā)送的數(shù)據(jù)包是否到達(dá)目標(biāo)設(shè)備焰扳。
TCP協(xié)議
而TCP協(xié)議就是為了解決UDP協(xié)議的缺點(diǎn)而誕生的倦零，它雖然實(shí)現(xiàn)上比UDP協(xié)議復(fù)雜，但是可靠性好吨悍，可以保證數(shù)據(jù)被發(fā)送到目標(biāo)設(shè)備上扫茅。
TCP三次握手
TCP協(xié)議是如何保證可靠性的呢？就是通過(guò)三次與目標(biāo)設(shè)備的通信來(lái)確定數(shù)據(jù)包發(fā)送成功育瓜。以瀏覽器和服務(wù)器的通信來(lái)打比方：
瀏覽器：你好服務(wù)器葫隙，我是 瀏覽器A。
服務(wù)器：你好 瀏覽器A躏仇，我是 服務(wù)器B恋脚。
瀏覽器：服務(wù)器B 你好。
官方描述
- 第一次握手：建立連接時(shí)焰手，客戶端發(fā)送syn包（syn=j）到服務(wù)器糟描，并進(jìn)入SYN_SENT狀態(tài)，等待服務(wù)器確認(rèn)书妻；SYN：同步序列編號(hào)（Synchronize Sequence Numbers）船响。
- 第二次握手：服務(wù)器收到syn包，必須確認(rèn)客戶的SYN（ack=j+1）躲履，同時(shí)自己也發(fā)送一個(gè)SYN包（syn=k）灿意，即SYN+ACK包，此時(shí)服務(wù)器進(jìn)入SYN_RECV狀態(tài)崇呵；
- 第三次握手：客戶端收到服務(wù)器的SYN+ACK包，向服務(wù)器發(fā)送確認(rèn)包ACK(ack=k+1）馅袁，此包發(fā)送完畢域慷，客戶端和服務(wù)器進(jìn)入ESTABLISHED（TCP連接成功）狀態(tài)，完成三次握手汗销。
完成三次握手犹褒，客戶端與服務(wù)器開(kāi)始傳送數(shù)據(jù)。這樣就保證了弛针，每次傳送數(shù)據(jù)都會(huì)準(zhǔn)確到達(dá)目標(biāo)設(shè)備了叠骑。
TCP四次揮手
當(dāng)數(shù)據(jù)包發(fā)送完畢需要斷開(kāi)連接的時(shí)候，就需要TCP的四次揮手來(lái)保證鏈接的合理斷開(kāi)削茁。再次以瀏覽器和服務(wù)器的通信打比方：
主動(dòng)結(jié)束方：你好宙枷，我的數(shù)據(jù)發(fā)送完畢了掉房，我要進(jìn)入準(zhǔn)備斷開(kāi)的狀態(tài)了。（此時(shí)它雖然不再發(fā)送數(shù)據(jù)了慰丛，但是可以接受數(shù)據(jù)）
另一方：我知道了卓囚，我還沒(méi)有發(fā)送完畢的，你等著吧诅病。
另一方：我也發(fā)送完畢了哪亿，可以斷開(kāi)鏈接了。（此時(shí)它也進(jìn)入準(zhǔn)備斷開(kāi)的狀態(tài)）
主動(dòng)結(jié)束方：好的贤笆，那斷開(kāi)吧蝇棉。
官方描述
1.客戶端A發(fā)送一個(gè)FIN，用來(lái)關(guān)閉客戶A到服務(wù)器B的數(shù)據(jù)傳送芥永。
2.服務(wù)器B收到這個(gè)FIN篡殷，它發(fā)回一個(gè)ACK，確認(rèn)序號(hào)為收到的序號(hào)加1恤左。和SYN一樣贴唇，一個(gè)FIN將占用一個(gè)序號(hào)。
3.服務(wù)器B關(guān)閉與客戶端A的連接飞袋，發(fā)送一個(gè)FIN給客戶端A戳气。
4.客戶端A發(fā)回ACK報(bào)文確認(rèn)，并將確認(rèn)序號(hào)設(shè)置為收到序號(hào)加1巧鸭。
TCP為什么建立鏈接是三次瓶您，關(guān)閉鏈接是四次呢？
這是前端面試中在設(shè)計(jì)HTTP協(xié)議問(wèn)題時(shí)纲仍，經(jīng)常會(huì)被問(wèn)的一個(gè)問(wèn)題呀袱。其實(shí)也不難理解，因?yàn)榉?wù)端的listen狀態(tài)下的socket當(dāng)收到SYN報(bào)文的建連請(qǐng)求后郑叠，它可以把ACK和SYN（ACK起應(yīng)答作用夜赵，而SYN起同步作用）放在一個(gè)報(bào)文里來(lái)發(fā)送。但關(guān)閉連接時(shí)乡革，當(dāng)收到對(duì)方的FIN報(bào)文通知時(shí)寇僧，它僅僅表示對(duì)方?jīng)]有數(shù)據(jù)發(fā)送給你了；但未必你所有的數(shù)據(jù)都全部發(fā)送給對(duì)方了沸版，所以你可以未必會(huì)馬上會(huì)關(guān)閉SOCKET,也即你可能還需要發(fā)送一些數(shù)據(jù)給對(duì)方之后嘁傀，再發(fā)送FIN報(bào)文給對(duì)方來(lái)表示你同意現(xiàn)在可以關(guān)閉連接了，所以它這里的ACK報(bào)文和FIN報(bào)文多數(shù)情況下都是分開(kāi)發(fā)送的视粮。
通過(guò)TCP協(xié)議使得兩臺(tái)設(shè)備成功鏈接细办，并成功發(fā)送了數(shù)據(jù)，接下來(lái)蕾殴，就需要服務(wù)器端來(lái)處理數(shù)據(jù)了笑撞。
服務(wù)器處理數(shù)據(jù)并返回響應(yīng)
當(dāng)服務(wù)器成功的接受到了瀏覽器發(fā)送的數(shù)據(jù)之后岛啸，接下來(lái)就是根據(jù)瀏覽器發(fā)送過(guò)來(lái)的數(shù)據(jù)就行后臺(tái)程序的處理。這個(gè)過(guò)程就是在運(yùn)行后端代碼娃殖，當(dāng)程序運(yùn)行完成以后就產(chǎn)生了返回?cái)?shù)據(jù)包值戳，然后服務(wù)器端在通過(guò)TCP協(xié)議將數(shù)據(jù)包發(fā)送回瀏覽器。
這個(gè)過(guò)程和前面相比是不是很簡(jiǎn)單炉爆，其實(shí)不然堕虹，這個(gè)過(guò)程也相當(dāng)復(fù)雜，只不過(guò)不是本文的重點(diǎn)就不詳細(xì)介紹了芬首，貼上一張Struts2的處理流程圖赴捞，自己體會(huì)一下服務(wù)器端的某一個(gè)小階段吧。
瀏覽器解析數(shù)據(jù)并呈現(xiàn)
當(dāng)服務(wù)器返回?cái)?shù)據(jù)包以后郁稍，接下來(lái)的工作就交給瀏覽器自己去處理這些數(shù)據(jù)赦政，最后展示在頁(yè)面上。這個(gè)過(guò)程涉及到了瀏覽器的運(yùn)行原理的相關(guān)只是耀怜，本人也不是很懂恢着，所以只是大概記錄一下。
瀏覽器的組成
1. 用戶界面：包括地址欄财破、后退/前進(jìn)按鈕掰派、書(shū)簽?zāi)夸浀龋簿褪悄闼吹降某擞脕?lái)顯示你所請(qǐng)求頁(yè)面的主窗口之外的其他部分左痢。
2. 瀏覽器引擎：用來(lái)查詢及操作渲染引擎的接口靡羡。
3. 渲染引擎：用來(lái)顯示請(qǐng)求的內(nèi)容，例如俊性，如果請(qǐng)求內(nèi)容為html略步，它負(fù)責(zé)解析html及css，并將解析后的結(jié)果顯示出來(lái)定页。
4. 網(wǎng)絡(luò)：用來(lái)完成網(wǎng)絡(luò)調(diào)用趟薄，例如http請(qǐng)求，它具有平臺(tái)無(wú)關(guān)的接口典徊，可以在不同平臺(tái)上工作杭煎。
5. UI后端：用來(lái)繪制類似組合選擇框及對(duì)話框等基本組件，具有不特定于某個(gè)平臺(tái)的通用接口宫峦，底層使用操作系統(tǒng)的用戶接口。
6. JS解釋器：用來(lái)解釋執(zhí)行JS代碼玫鸟。
7. 數(shù)據(jù)存儲(chǔ)：屬于持久層导绷，瀏覽器需要在硬盤中保存類似cookie的各種數(shù)據(jù)，HTML5定義了web database技術(shù)屎飘，這是一種輕量級(jí)完整的客戶端存儲(chǔ)技術(shù)
渲染的流程
可以簡(jiǎn)單的描述為以下四部分：
1.解析HTML以構(gòu)建DOM樹(shù)
2.構(gòu)建render樹(shù)
3.布局render樹(shù)
4.繪制render樹(shù)
但實(shí)際上渲染的過(guò)程是這樣的：
1.在瀏覽器進(jìn)行渲染的時(shí)候妥曲，渲染引擎首先會(huì)解析HTML代碼贾费，然后將標(biāo)簽轉(zhuǎn)化為DOM樹(shù)上的一個(gè)個(gè)對(duì)應(yīng)節(jié)點(diǎn)（我們可以在chorme的Elements面板中查看到）。
2.接著檐盟，渲染引擎解析外部CSS文件及style標(biāo)簽中的樣式信息褂萧。這些樣式信息以及HTML中的可見(jiàn)性指令將被用來(lái)構(gòu)建另一棵樹(shù)---render樹(shù)。Render樹(shù)由一些包含有顏色和大小等屬性的矩形組成葵萎，它們將被按照正確的順序顯示到屏幕上导犹。
3.Render樹(shù)構(gòu)建好了之后，將會(huì)執(zhí)行布局過(guò)程羡忘，它將確定每個(gè)節(jié)點(diǎn)在屏幕上的確切坐標(biāo)谎痢。
4.然后就是繪制，即遍歷render樹(shù)卷雕，并使用UI后端層繪制每個(gè)節(jié)點(diǎn)节猿。
值得注意的是，這個(gè)過(guò)程是逐步完成的漫雕，為了更好的用戶體驗(yàn)滨嘱，渲染引擎將會(huì)盡可能早的將內(nèi)容呈現(xiàn)到屏幕上，并不會(huì)等到所有的html都解析完成之后再去構(gòu)建和布局render樹(shù)浸间。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容太雨，同時(shí)，可能還在通過(guò)網(wǎng)絡(luò)下載其余內(nèi)容发框。
補(bǔ)充WEBKIT渲染引擎和GECKO渲染引擎
總結(jié)
到這里基本上整個(gè)網(wǎng)絡(luò)請(qǐng)求的過(guò)程就結(jié)束了躺彬，你在瀏覽器地址框輸入了域名并回車，然后通過(guò)DNS解析找到相應(yīng)的IP地址梅惯；然后通過(guò)HTTP協(xié)議建立了鏈接宪拥，找到了目標(biāo)服務(wù)器的位置；接著就是TCP三次握手建立可靠鏈接铣减，發(fā)送數(shù)據(jù)她君，服務(wù)器處理數(shù)據(jù)，TCP四次揮手斷開(kāi)鏈接葫哗；最后瀏覽器根據(jù)返回的數(shù)據(jù)解析渲染呈現(xiàn)頁(yè)面缔刹。
