前言
此題無(wú)論是在筆試題中還是面試題中个绍，考察的頻率都及其高，今天就圖文并茂地梳理一下這個(gè)流程凛虽。
這里我們以天貓(淘寶)為例涩维。
客戶端的視角
用戶輸入U(xiǎn)RL
瀏覽器一般會(huì)根據(jù)歷史記錄自動(dòng)補(bǔ)全url瓦阐，有的瀏覽器直接從瀏覽器緩存中把頁(yè)面展示出來(lái)睡蟋。
瀏覽器解析url
我們都知道戳杀，url其實(shí)是一種方便人類(lèi)記憶的標(biāo)識(shí)符信卡，實(shí)際上計(jì)算機(jī)都是通過(guò)IP地址進(jìn)行通信的傍菇。這個(gè)url轉(zhuǎn)IP的過(guò)程就叫解析域名丢习。
步驟一般分為下面幾步：
1.利用本地host文件進(jìn)行解析
2.向本地DNS服務(wù)器請(qǐng)求解析
3.本地DNS服務(wù)器向根DNS服務(wù)器咐低、域服務(wù)器等請(qǐng)求解析(有遞歸和迭代兩種方式)
4.本地DNS服務(wù)器在請(qǐng)求完成后需要緩存url和ip的映射關(guān)系
瀏覽器發(fā)起連接
瀏覽器會(huì)先和服務(wù)器建立TCP連接（80端口）见擦，再構(gòu)造http報(bào)文發(fā)送http請(qǐng)求锡宋，如果是https(443)還需要提供證書(shū)來(lái)加密执俩。
http報(bào)文
由請(qǐng)求方法役首、請(qǐng)求頭、請(qǐng)求正文等構(gòu)成
請(qǐng)求方法：
GET 從服務(wù)器向客戶端發(fā)送命名資源
PUT 將客戶端錄入的數(shù)據(jù)存儲(chǔ)到一個(gè)命名的服務(wù)器資源中去
DELET 從服務(wù)器刪除命名資源
POST 將客戶端數(shù)據(jù)發(fā)送到一個(gè)服務(wù)器網(wǎng)關(guān)應(yīng)用程序
HEAD 僅發(fā)送命名資源響應(yīng)中的HTTP首部
其他方法：比如TRACE爹袁、OPTION失息、LOCK盹兢、UNLOCK等绎秒，可查閱維基百科
請(qǐng)求頭：包括客戶端的一些環(huán)境信息
Accept：瀏覽器可接受的MIME類(lèi)型尼摹。
Accept-Encoding：瀏覽器能夠進(jìn)行解碼的數(shù)據(jù)編碼方式。
Accept-Language：瀏覽器所希望的語(yǔ)言種類(lèi)玄呛，當(dāng)服務(wù)器能夠提供一種以上的語(yǔ)言版本時(shí)要用到把鉴。
Connection：表示是否需要持久連接儿咱。
Content-Length：表示請(qǐng)求消息正文的長(zhǎng)度混埠。
Cookie：瀏覽器端存儲(chǔ)的信息
Host：初始URL中的主機(jī)和端口钳宪。
If-Modified-Since：只有當(dāng)所請(qǐng)求的內(nèi)容在指定的日期之后又經(jīng)過(guò)修改才返回它吏颖，否則返回304“Not Modified”應(yīng)答半醉。
Referer：包含一個(gè)URL劝术，用戶從該URL代表的頁(yè)面出發(fā)訪問(wèn)當(dāng)前請(qǐng)求的頁(yè)面呆奕。
User-Agent：瀏覽器類(lèi)型梁钾，如果Servlet返回的內(nèi)容與瀏覽器類(lèi)型有關(guān)則該值非常有用姆泻。
...
請(qǐng)求正文：一般是post或者put方法附帶的請(qǐng)求信息
注意：在這個(gè)過(guò)程中可能會(huì)有重定向拇勃，瀏覽器會(huì)跟蹤重定向地址潜秋，再次發(fā)送一個(gè)HTTP請(qǐng)求
等待服務(wù)器返回報(bào)文
這個(gè)過(guò)程用戶也只能跟著等待峻呛，但是一般來(lái)說(shuō)不會(huì)太久钩述，前提是網(wǎng)絡(luò)情況好的情況下牙勘。
瀏覽器渲染頁(yè)面
瀏覽器根據(jù)返回的報(bào)文解析DOM樹(shù)和CSSOM樹(shù)方面、然后解析成Render樹(shù),開(kāi)始渲染HTML頁(yè)面(布局色徘，繪制褂策，展現(xiàn))斤寂，并請(qǐng)求相關(guān)資源（主流瀏覽器并發(fā)HTTP數(shù)量一般是4個(gè)或6個(gè)）。
網(wǎng)絡(luò)的視角
客戶端和服務(wù)端經(jīng)歷了tcp三次握手(SSL/TLS握手)
- tcp三次握手
第一次握手：客戶端A將標(biāo)志位SYN置為1,隨機(jī)產(chǎn)生一個(gè)值為seq=J（J的取值范圍為=1234567）的數(shù)據(jù)包到服務(wù)器罗侯，客戶端A進(jìn)入SYN_SENT狀態(tài)歇父，等待服務(wù)端B確認(rèn)；
第二次握手：服務(wù)端B收到數(shù)據(jù)包后由標(biāo)志位SYN=1知道客戶端A請(qǐng)求建立連接榜苫，服務(wù)端B將標(biāo)志位SYN和ACK都置為1垂睬，ack=J+1，隨機(jī)產(chǎn)生一個(gè)值seq=K钳枕，并將該數(shù)據(jù)包發(fā)送給客戶端A以確認(rèn)連接請(qǐng)求鱼炒，服務(wù)端B進(jìn)入SYN_RCVD狀態(tài)昔瞧。
第三次握手：客戶端A收到確認(rèn)后自晰，檢查ack是否為J+1酬荞，ACK是否為1瞧哟，如果正確則將標(biāo)志位ACK置為1勤揩，ack=K+1雄可，并將該數(shù)據(jù)包發(fā)送給服務(wù)端B数苫，服務(wù)端B檢查ack是否為K+1虐急，ACK是否為1止吁，如果正確則連接建立成功敬惦，客戶端A和服務(wù)端B進(jìn)入ESTABLISHED狀態(tài)，完成三次握手宏怔。
- SSL/TLS握手
第一次握手：客戶端先向服務(wù)器發(fā)出加密通信的請(qǐng)求臊诊，并且提供自己的一些信息(加密方法等)抓艳，這被叫做ClientHello請(qǐng)求帚戳。
第二次握手：服務(wù)器收到客戶端請(qǐng)求后销斟，向客戶端發(fā)出回應(yīng)蚂踊，并且提供服務(wù)器證書(shū)棱诱、確認(rèn)的加密方法等涝动，這叫做SeverHello醋粟。
第三次握手：客戶端收到服務(wù)器回應(yīng)以后厦凤，首先驗(yàn)證服務(wù)器證書(shū)育苟，如果沒(méi)問(wèn)題的話會(huì)向服務(wù)器發(fā)送用于加密的隨機(jī)數(shù)、編碼改變通知香椎、客戶端握手結(jié)束通知畜伐。
第四次握手：服務(wù)器收到客戶端的隨機(jī)數(shù)之后谆级，計(jì)算生成本次會(huì)話所用的"會(huì)話密鑰"脚仔，然后向客戶端發(fā)送編碼改變通知和服務(wù)器握手結(jié)束通知鲤脏。
充當(dāng)中間人
因?yàn)閳?bào)文會(huì)經(jīng)過(guò)路由設(shè)備吕朵、代理/網(wǎng)關(guān)猎醇、防火墻等，在網(wǎng)絡(luò)里的這些設(shè)備都會(huì)做相應(yīng)的處理努溃，其中最常用的技術(shù)是CDN：想盡一切辦法使用戶可就近取得所需內(nèi)容硫嘶，盡可能地降低因?yàn)镮nternet網(wǎng)擁擠造成的慢，提高用戶訪問(wèn)網(wǎng)站的響應(yīng)速度梧税。
TCP四次揮手
第一次揮手：客戶端發(fā)送一個(gè)FIN沦疾，客戶端進(jìn)入FIN_WAIT_1狀態(tài)。
第二次揮手：服務(wù)端收到FIN后第队，發(fā)送一個(gè)ACK給客戶端哮塞，確認(rèn)序號(hào)為收到seq+1（與SYN相同，一個(gè)FIN占用一個(gè)序號(hào)）忆畅，服務(wù)端進(jìn)入CLOSE_WAIT狀態(tài)如失。
第三次揮手：服務(wù)端發(fā)送一個(gè)FIN葫督，服務(wù)端進(jìn)入LAST_ACK狀態(tài)偎快。
第四次揮手：客戶端收到FIN后，客戶端進(jìn)入TIME_WAIT狀態(tài)喷好，接著發(fā)送一個(gè)ACK給服務(wù)端效览，確認(rèn)序號(hào)為收到seq+1，服務(wù)端進(jìn)入CLOSED狀態(tài)籍嘹，完成四次揮手识补。
服務(wù)端的視角
負(fù)載均衡
請(qǐng)求報(bào)文不是直接到服務(wù)器的切油，可能是經(jīng)過(guò)反向代理負(fù)載均衡處理過(guò)才到達(dá)的。
負(fù)載均衡有DNS負(fù)載均衡稚伍、IP負(fù)載均衡等多種方式受楼，常用的負(fù)載均衡算法有猴贰，輪詢甚牲，隨機(jī)，最少鏈接，源地址散列，加權(quán)等方式允华。
處理請(qǐng)求
如果服務(wù)端設(shè)置了反向代理的話百炬，請(qǐng)求會(huì)先經(jīng)過(guò)它，反向代理類(lèi)似于"中間人"虫埂，既可以是客戶端，也可以是服務(wù)端，它最大的作用就是幫助服務(wù)端更有效率地處理報(bào)文麻裁，比如負(fù)載均衡手销、緩存靜態(tài)內(nèi)容等祸轮。
返回響應(yīng)報(bào)文
有時(shí)候因?yàn)橐恍┨厥獾脑蚧居热鏷ttp轉(zhuǎn)https、網(wǎng)站結(jié)構(gòu)調(diào)整等详拙，會(huì)用301永久重定向或者302臨時(shí)重定向響應(yīng)客戶端弃揽。
響應(yīng)報(bào)文由狀態(tài)行娜庇、響應(yīng)頭、響應(yīng)正文組成蜈垮，比較重要的是狀態(tài)行羔砾，響應(yīng)頭和響應(yīng)正文可以類(lèi)比請(qǐng)求頭和請(qǐng)求正文，在此我不再贅述，有興趣研究的朋友可以自行去查閱其他資料。
狀態(tài)碼
100~199 信息性狀態(tài)碼
? 100 Continue
? 101 Switching Protocols
200~299 成功狀態(tài)碼
? 200 OK
? 201 Created
? 202 Accepted
? 203 Non-Authoritative Information
? 204 No Content
? 205 Reset Content
300~399 重定向狀態(tài)碼
? 300 Multiple Choices：客戶端請(qǐng)求一個(gè)實(shí)際指向多個(gè)資源的URL時(shí)會(huì)返回這個(gè)狀態(tài)碼砌溺。
? 301 Move Permanently：所請(qǐng)求的資源已經(jīng)被移走(永久性重定向)肌厨。
? 302 Found：臨時(shí)性重定向。
? 303 See Other：該狀態(tài)碼表示請(qǐng)求對(duì)應(yīng)的資源存在另一個(gè)URL厘熟，應(yīng)使用GET方法獲取資源。
? 304 Not Modified：該狀態(tài)碼表示客戶端發(fā)送附帶條件的請(qǐng)求(包含If-Match、If-Modified廓旬、no-store春霍、no-cache饱溢、Expires次舌、catch-control等首部)時(shí)，服務(wù)器端允許請(qǐng)求訪問(wèn)資源徘郭，但因發(fā)生請(qǐng)求為滿足條件的情況后壳快，直接返回304 Not Modified(服務(wù)器端資源未改變七婴，可直接使用客戶端未過(guò)期的緩存)魂爪。304狀態(tài)碼返回時(shí)，不包含任何響應(yīng)的主體部分歹鱼。304雖然放在3XX類(lèi)別中，但是和重定向沒(méi)有一點(diǎn)關(guān)系定血。
? 307 Temporary Redirect：臨時(shí)重定向。不會(huì)從POST變成GET婴氮。每種瀏覽器有可能出現(xiàn)不同的情況罩驻。
400~499 客戶端錯(cuò)誤狀態(tài)碼
? 400 Bad Request：請(qǐng)求報(bào)文中存在語(yǔ)法錯(cuò)誤
? 401 Unauthorized：用戶需進(jìn)行認(rèn)證器一。
? 403 Forbidden：表明對(duì)所請(qǐng)求資源的訪問(wèn)被服務(wù)器拒絕了志鞍。
? 404 Not Found：服務(wù)器上無(wú)法找到所請(qǐng)求的資源，也有可能是服務(wù)器拒絕請(qǐng)求且不想說(shuō)明理由時(shí)使用
500~599 服務(wù)器錯(cuò)誤
? 500 Internal Sever Error：服務(wù)器遇到一個(gè)妨礙它為請(qǐng)求提供服務(wù)的錯(cuò)誤時(shí)呜师，使用此狀態(tài)碼
? 502 Bad Gateway：網(wǎng)關(guān)錯(cuò)誤
? 503 Service Unavailable：用來(lái)說(shuō)明服務(wù)器現(xiàn)在無(wú)法為請(qǐng)求提供服務(wù)，但是將來(lái)可以角寸。如果服務(wù)器知道服務(wù)什么時(shí)候可用纹磺，可以在響應(yīng)中包含一個(gè)Retry-After首部。
? 504 Gateway Timeout
總結(jié)
一圖抵千言
參考資料
- 維基百科
- 《HTTP權(quán)威指南》
- 《圖解HTTP》
- 《計(jì)算機(jī)網(wǎng)絡(luò)原理 第四版》
