http://www.360doc.com/content/17/0330/14/11277047_641420560.shtml
不管是前端還是后臺(tái)開(kāi)發(fā)，在找工作的時(shí)候姿锭，只要涉及到網(wǎng)絡(luò)方面的知識(shí)，必然會(huì)問(wèn)到這樣一個(gè)問(wèn)題：當(dāng)我在瀏覽器的地址欄里輸入一個(gè)完整的URL淮野，在按下回車(chē)直至頁(yè)面加載完成涡扼，整個(gè)過(guò)程發(fā)生了什么？這是一道考察綜合能力的面試題屹电，今天我們就一起來(lái)總結(jié)下該如 ...
不管是前端還是后臺(tái)開(kāi)發(fā)阶剑，在找工作的時(shí)候，只要涉及到網(wǎng)絡(luò)方面的知識(shí)危号，必然會(huì)問(wèn)到這樣一個(gè)問(wèn)題：當(dāng)我在瀏覽器的地址欄里輸入一個(gè)完整的URL牧愁，在按下回車(chē)直至頁(yè)面加載完成，整個(gè)過(guò)程發(fā)生了什么外莲？這是一道考察綜合能力的面試題猪半，今天我們就一起來(lái)總結(jié)下該如何回答這個(gè)問(wèn)題，當(dāng)然我只是在這里講解主要的知識(shí)點(diǎn)偷线，涉及到的細(xì)節(jié)還需要大家再去找資料看磨确。
整體過(guò)程
在這整個(gè)過(guò)程中，大致可以分為以下幾個(gè)過(guò)程
DNS域名解析
TCP連接
HTTP請(qǐng)求
處理請(qǐng)求返回HTTP響應(yīng)
頁(yè)面渲染
關(guān)閉連接
DNS域名解析
首先我們應(yīng)該要知道的是声邦，在地址欄輸入的域名并不是最后資源所在的真實(shí)位置乏奥，域名只是與IP地址的一個(gè)映射。網(wǎng)絡(luò)服務(wù)器的IP地址那么多亥曹，我們不可能去記一串串的數(shù)字邓了，因此域名就產(chǎn)生了恨诱，域名解析的過(guò)程實(shí)際是將域名還原為IP地址的過(guò)程。
DNS域名解析有兩種方法骗炉，分別是迭代查詢(xún)和遞歸查詢(xún)
- 迭代查詢(xún)
[圖片上傳失敗...(image-3634a0-1512913615612)]
迭代查詢(xún)
- 遞歸查詢(xún)
[圖片上傳中...(image-e7d1b6-1512913615612-5)]
遞歸查詢(xún)
TCP連接
在通過(guò)第一步的DNS域名解析后照宝，獲取到了服務(wù)器的IP地址，在獲取到IP地址后句葵，便會(huì)開(kāi)始建立一次連接硫豆，這是由TCP協(xié)議完成的，主要通過(guò)三次握手進(jìn)行連接笼呆。
三次握手的示意圖如下：
[圖片上傳中...(image-d14f20-1512913615612-4)]
三次握手
HTTP請(qǐng)求
在確認(rèn)與服務(wù)器建立連接后熊响，便會(huì)發(fā)送一個(gè)HTTP請(qǐng)求，HTTP請(qǐng)求的報(bào)文主要包括請(qǐng)求行诗赌，請(qǐng)求頭汗茄，請(qǐng)求正文。
請(qǐng)求行的內(nèi)容一般類(lèi)似于：GET index.html HTTP/1.1
請(qǐng)求頭的內(nèi)容一般如下铭若，可以通過(guò)瀏覽器開(kāi)發(fā)者工具查看
[圖片上傳中...(image-d06b56-1512913615612-3)]
請(qǐng)求頭
請(qǐng)求體一般包含請(qǐng)求傳遞的參數(shù)
[圖片上傳失敗...(image-4182f2-1512913615612)]
請(qǐng)求體
處理HTTP請(qǐng)求并響應(yīng)
服務(wù)器在收到瀏覽器發(fā)送的HTTP請(qǐng)求之后洪碳，會(huì)將收到的HTTP報(bào)文封裝成HTTP的Request對(duì)象，并通過(guò)不同的Web服務(wù)器進(jìn)行處理叼屠，處理完的結(jié)果以HTTP的Response對(duì)象返回瞳腌，主要包括狀態(tài)碼，響應(yīng)頭镜雨，響應(yīng)報(bào)文三個(gè)部分嫂侍。
狀態(tài)碼主要包括以下部分
1xx：指示信息–表示請(qǐng)求已接收，繼續(xù)處理荚坞。
2xx：成功–表示請(qǐng)求已被成功接收挑宠、理解、接受颓影。
3xx：重定向–要完成請(qǐng)求必須進(jìn)行更進(jìn)一步的操作各淀。
4xx：客戶(hù)端錯(cuò)誤–請(qǐng)求有語(yǔ)法錯(cuò)誤或請(qǐng)求無(wú)法實(shí)現(xiàn)。
5xx：服務(wù)器端錯(cuò)誤–服務(wù)器未能實(shí)現(xiàn)合法的請(qǐng)求诡挂。
響應(yīng)頭主要由Cache-Control碎浇、 Connection、Date璃俗、Pragma等組成
響應(yīng)體為服務(wù)器返回給瀏覽器的信息奴璃，主要由HTML，css旧找，js溺健，圖片文件組成
頁(yè)面渲染
頁(yè)面DOM樹(shù)的渲染是個(gè)復(fù)雜的過(guò)程，需要深入了解DOM原理，這里簡(jiǎn)要描述一下鞭缭，主要過(guò)程如下
[圖片上傳失敗...(image-b14fb3-1512913615611)]
DOM樹(shù)渲染
關(guān)閉連接
在頁(yè)面元素傳輸完成后剖膳，會(huì)選擇關(guān)閉連接，此時(shí)用到的是TCP四次揮手岭辣，示意圖如下
[圖片上傳失敗...(image-4d6102-1512913615610)]
TCP四次揮手
