每個(gè)前端都要了解點(diǎn)網(wǎng)絡(luò)知識(shí)
一、OSI 參考模型 與 TCP/IP 五層模型

我們主要關(guān)注于 TCP/IP 五層模型的應(yīng)用層和傳輸層就足夠了。
應(yīng)用層:
- 作用:為應(yīng)用程序提供服務(wù)。
- 常見(jiàn)協(xié)議:HTTP、HTTPS、FTP、POP3、SMTP等。
傳輸層:
- 作用:實(shí)現(xiàn)應(yīng)用程序之間的數(shù)據(jù)傳輸。
- 協(xié)議:UDP、TCP
二、UDP 與 TCP
1. UDP
UDP 是面向無(wú)連接的協(xié)議,它只會(huì)把數(shù)據(jù)傳遞給接收端,但不會(huì)關(guān)注接收端是否已經(jīng)正確接收了數(shù)據(jù),所以有時(shí)候 UDP 會(huì)被認(rèn)為是不可靠的數(shù)據(jù)報(bào)協(xié)議。但這種特性反而適合多播,實(shí)時(shí)的視頻和音頻傳輸。
優(yōu)點(diǎn):
- 無(wú)需建立連接(減少了延遲)
- 實(shí)現(xiàn)簡(jiǎn)單(效率高)
- 頭部開(kāi)銷小( 8 字節(jié))
- 沒(méi)有擁塞控制(更好的控制發(fā)送時(shí)間和速率)
缺點(diǎn):
- 沒(méi)有建立連接(數(shù)據(jù)想發(fā)就發(fā),不可靠)
- 沒(méi)有擁塞控制(網(wǎng)絡(luò)條件不好時(shí)會(huì)導(dǎo)致丟包)
2. TCP
TCP 是面向有連接的協(xié)議,在使用 TCP 協(xié)議 傳輸數(shù)據(jù)之前一定需要在發(fā)送方和接收方之間建立連接。建立連接三次握手,斷開(kāi)連接四次揮手~
(1) TCP 建立連接三次握手
***次握手:客戶端向服務(wù)端發(fā)送一個(gè) SYN(Seq=X) 包,客戶端進(jìn)入 SYN-SENT 狀態(tài),等待服務(wù)端的 ACK(Ack=X+1)回復(fù)。
ps::Seq 是序號(hào),Ack 是確認(rèn)序號(hào)。
第二次握手:服務(wù)端根據(jù)接收到客戶端發(fā)來(lái)的 SYN(Seq=X) 包后返回一個(gè) ACK(Ack=X+1) 以及 SYN(Seq=Y) 包給客戶端,服務(wù)端進(jìn)入 SYN-RECIVED 狀態(tài),等待客戶端的 ACK(Ack=Y+1) 回復(fù)。
第三次握手:客戶端接收到 ACK(X+1) 后,進(jìn)入 ESTABLISHED 狀態(tài)。根據(jù)服務(wù)端發(fā)來(lái)的 SYN(Y) 返回一個(gè) ACK(Y+1) 包給服務(wù)端。
服務(wù)端 接收 ACK(Y+1)后進(jìn)入 ESTABLISHED 狀態(tài)。此時(shí)連接建立成功。
這個(gè)過(guò)程可以用以下三句形象表示:
- (客戶端):我想建立連接了,服務(wù)端你準(zhǔn)備好沒(méi)有呀?
- (服務(wù)端):我準(zhǔn)備好了,你準(zhǔn)備好沒(méi)有?
- (客戶端):我也準(zhǔn)備好了,開(kāi)始吧~
(2) TCP 關(guān)閉連接四次揮手
這個(gè)過(guò)程可以用以下四句句形象表示:
- (客戶端):我想關(guān)閉連接了。
- (服務(wù)端):我知道了。
- (服務(wù)端):我現(xiàn)在準(zhǔn)備關(guān)閉連接了,ok 嗎?
- (客戶端):ok,你關(guān)閉吧。
3. UDP 與 TCP 的區(qū)別
- UDP 協(xié)議是面向無(wú)連接的,它不能保證數(shù)據(jù)有序且不丟失的傳到對(duì)端,但是 UDP 比 TCP 更高效。
- TCP 協(xié)議是面向有連接的,建立和斷開(kāi)連接都需要握手,在傳輸數(shù)據(jù)的過(guò)程中,通過(guò)滑動(dòng)窗口(流量控制)、擁塞處理(慢開(kāi)始,擁塞避免,快速重傳,快速恢復(fù)),能夠正確處理丟包問(wèn)題,保證接收方能夠收到數(shù)據(jù),與此同時(shí)還能夠有效利用網(wǎng)絡(luò)帶寬。
三、HTTP
HTTP (HyperText Transfer Protocol) 超文本傳輸協(xié)議 是一個(gè)基于 TCP (傳輸層) 的應(yīng)用層協(xié)議,是客戶端與服務(wù)端之間請(qǐng)求和響應(yīng)的標(biāo)準(zhǔn)。
主要特點(diǎn):
- 簡(jiǎn)單快速:客戶端向服務(wù)器請(qǐng)求服務(wù)時(shí),只需請(qǐng)求方法和請(qǐng)求路徑。
- 無(wú)狀態(tài):客戶端再次向服務(wù)器請(qǐng)求服務(wù)時(shí),服務(wù)器并不知道客戶端之前是否請(qǐng)求過(guò)。
- 無(wú)連接:每次請(qǐng)求都會(huì)建立一個(gè) TCP 連接,請(qǐng)求處理完成后連接斷開(kāi)。
HTTP 報(bào)文:
(1)請(qǐng)求行:GET https://www.baidu.com/ HTTP/1.1 由請(qǐng)求方法、URL、協(xié)議版本組成
(2)響應(yīng)行:
- HTTP/1.1 200 OK
- 協(xié)議版本、狀態(tài)碼、狀態(tài)信息組成
HTTP 請(qǐng)求方法:
請(qǐng)求方法分為很多種,最常用的也就是 GET 和 POST 了。雖然請(qǐng)求方法很多,但更多的是為了傳達(dá)語(yǔ)義。更多的方法的語(yǔ)義描述可以閱讀 文檔 。
四、GET 和 POST 的區(qū)別
GET:
- 能緩存、請(qǐng)求長(zhǎng)度限制、 有歷史記錄
- GET 多用于 無(wú)副作用(不修改資源)、冪等(請(qǐng)求次數(shù)與資源無(wú)關(guān))的場(chǎng)景。
POST:
- POST 相對(duì) GET 安全一點(diǎn)點(diǎn),因?yàn)?GET 請(qǐng)求發(fā)送的數(shù)據(jù)包含在 URL 里。
兩者詳細(xì)對(duì)比:
- 
狀態(tài)碼:狀態(tài)碼表示了響應(yīng)的狀態(tài),可以讓我們知道這一次的請(qǐng)求是成功還是失敗,如果失敗,是什么原因?qū)е碌摹?/p>
2XX 成功:
- 200 OK ,請(qǐng)求成功并返回?cái)?shù)據(jù)
- 204 No Content ,成功但無(wú)內(nèi)容
- 206 Partial Content ,范圍請(qǐng)求
3XX 重定向:
- 301 ***重定向,表示資源已被分配了新的 URL
- 302 臨時(shí)重定向,資源臨時(shí)被分配新的 URL
- 304 資源未修改,可使用緩存
4XX 客戶端錯(cuò)誤:
- 400 請(qǐng)求語(yǔ)法錯(cuò)誤
- 401 要求身份認(rèn)證
- 403 請(qǐng)求被服務(wù)器拒絕
- 404 資源不存在
5XX 服務(wù)器錯(cuò)誤:
- 500 服務(wù)器錯(cuò)誤
- 503 服務(wù)器超負(fù)載或停機(jī)維護(hù)
五、HTTPS
更安全的網(wǎng)絡(luò)傳輸協(xié)議:
- 需要安裝證書(公鑰)
- 經(jīng)過(guò) SSL/TLS 協(xié)議 加密,傳輸?shù)膬?nèi)容是經(jīng)過(guò)加密的
- 使用 443 端口
六、HTTP/2
- 多路復(fù)用:在同一個(gè) TCP 連接上傳輸所有的請(qǐng)求數(shù)據(jù),避免 隊(duì)頭阻塞(瀏覽器限制同一個(gè)域名下的連接數(shù))問(wèn)題
- Header 壓縮:使用了 HPACK 壓縮格式對(duì)傳輸?shù)?header 進(jìn)行編碼,減少了 header 的大小。并在兩端維護(hù)了索引表,用于記錄出現(xiàn)過(guò)的 header ,避免 header 重復(fù)傳輸。
- 二進(jìn)制傳輸:在之前的 HTTP 版本中,我們是通過(guò)文本的方式傳輸數(shù)據(jù)。在 HTTP/2 中引入了新的編碼機(jī)制,所有傳輸?shù)臄?shù)據(jù)都會(huì)被分割,并采用二進(jìn)制格式編碼。
- 服務(wù)端推送:服務(wù)端可以在客戶端的某個(gè)請(qǐng)求后,主動(dòng)推送其他客戶端在之后會(huì)用到的資源。省去了客戶端重復(fù)請(qǐng)求的步驟,降低了延遲。
參考資料:
- https://juejin.im/post/5c64d15d6fb9a049d37f9c20#heading-49
- https://mp.weixin.qq.com/s/GICbiyJpINrHZ41u_4zT-A?
- http://www.alloyteam.com/2016/07/httphttp2-0spdyhttps-reading-this-is-enough/
- https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5bdc72b151882516f039fce3