【前端詞典】進階必備的網絡基礎(上)

前言

在不那麼遙遠的一些年之前,一個在江湖中行走的前端,只須要了解「前端三劍客」就足以找到一份工做。不少前端只限於 CSS,HTML、JS,網絡基礎,數據結構之類的都不甚瞭解。不過這個時期的前端也是最受鄙視的時期,這個時期前端的大量工做依賴於後端,且不須要動畫效果和交互效果。前端

現現在前端圈已經發生翻天覆地的變化,Vue,React,ES6,HTML5,CSS3,Webpack, PostCss 等技術層出不窮。做爲一個有格局的前端,對網絡基礎定是要了然於心的。面試

若是你對網絡基礎還不太瞭解,如下的內容能夠給你提供一個思路;若是你對此已經瞭然於心,如下的內容煩請批評指正。數據庫

入題segmentfault

任何事物的誕生,最初都是服務於極少數人的。漸漸地被這極少數人推而廣之,咱們大衆就開始接觸瞭解它,互聯網是如此,麻將亦是如此。無論是互聯網仍是麻將,它們都加強了人與人之間的交流。 接下來我會講如下內容:後端

  1. 五層因特網協議棧
  2. HTTP 與 HTTPS 的區別
  3. TCP/IP 協議
  4. 三次握手和四次揮手
  5. DNS 域名解析
  6. 五類 IP 地址
  7. 跨域的緣由及處理方式
  8. 正向代理和反向代理
  9. CDN 帶來的性能優化
  10. HTTP 強緩存&協商緩存

這一篇我會講 1 ~ 5, 6 ~ 10 我會在下一篇講。跨域

五層因特網協議棧 TOP 瀏覽器

五層因特網協議棧這個知識點對你來講或許有點枯燥,不過當你對這個協議棧有了一個初步的瞭解以後,你以前的某些疑問就會很明朗。緩存

1、應用層

應用層( application-layer )的任務是經過應用進程間的交互來完成特定網絡應用。應用層協議定義的是應用進程(進程:主機中正在運行的程序)間的通訊和交互的規則。對於不一樣的網絡應用須要不一樣的應用層協議。在互聯網中應用層協議不少,如域名系統 DNS,支持萬維網應用的 HTTP 協議,支持電子郵件的 SMTP 協議等等。安全

咱們把應用層交互的數據單元稱爲報文性能優化

域名系統

域名系統( Domain Name System )是因特網的一項核心服務,它做爲能夠將域名和 IP 地址相互映射的一個分佈式數據庫,可以令人更方便的訪問互聯網,而不用去記住可以被機器直接讀取的 IP 數串。

http 協議

超文本傳輸協議( HyperText Transfer Protocol )是互聯網上應用最爲普遍的一種網絡協議。全部的 WWW(萬維網) 文件都必須遵照這個標準。

2、傳輸層

傳輸層(transport layer)的主要任務就是負責向兩臺主機進程之間的通訊提供通用的數據傳輸服務。應用進程利用該服務傳送應用層報文。

傳輸層經常使用的兩種協議

  1. 傳輸控制協議-TCP:提供面向鏈接的,可靠的數據傳輸服務。
  2. 用戶數據協議-UDP:提供無鏈接的,盡最大努力的數據傳輸服務(不保證數據傳輸的可靠性)。

TCP(Transmisson Control Protocol)

  1. TCP 是面向鏈接的(須要先創建鏈接);
  2. 每一條 TCP 鏈接只能有兩個端點,每一條 TCP 鏈接只能是一對一;
  3. TCP提供可靠交付的服務。經過TCP鏈接傳送的數據,無差錯、不丟失、不重複、而且按序到達;
  4. TCP 提供全雙工通訊。TCP 容許通訊雙方的應用進程在任什麼時候候都能發送數據。TCP 鏈接的兩端都設有發送緩存和接收緩存,用來臨時存放雙方通訊的數據;
  5. 面向字節流。TCP 中的「流」(Stream)指的是流入進程或從進程流出的字節序列。

UDP(User Datagram Protocol)

  1. UDP 是無鏈接的;
  2. UDP 是盡最大努力交付,即不保證可靠交付,所以主機不須要維持複雜的連接狀態;
  3. UDP 是面向報文的;
  4. UDP 沒有擁塞控制,所以網絡出現擁塞不會使源主機的發送速率下降(對實時應用頗有用,如直播,實時視頻會議等);
  5. UDP 支持一對1、一對多、多對一和多對多的交互通訊;
  6. UDP 的首部開銷小,只有 8 個字節,比 TCP 的 20 個字節的首部要短。
  1. 單工數據傳輸只支持數據在一個方向上傳輸
  2. 半雙工數據傳輸容許數據在兩個方向上傳輸,可是,在某一時刻,只容許數據在一個方向上傳輸,它其實是一種切換方向的單工通訊;
  3. 全雙工數據通訊容許數據同時在兩個方向上傳輸,所以,全雙工通訊是兩個單工通訊方式的結合,它要求發送設備和接收設備都有獨立的接收和發送能力。

3、網絡層

網絡層的任務就是選擇合適的網間路由和交換結點,確保計算機通訊的數據及時傳送。在發送數據時,網絡層把運輸層產生的報文段或用戶數據報封裝成分組和包進行傳送。在 TCP/IP 體系結構中,因爲網絡層使用 IP 協議,所以分組也叫 IP 數據報 ,簡稱數據報。

互聯網是由大量的異構(heterogeneous)網絡經過路由器(router)相互鏈接起來的。互聯網使用的網絡層協議是無鏈接的網際協議(Intert Prococol)和許多路由選擇協議,所以互聯網的網絡層也叫作網際層或 IP 層。

4、數據鏈路層

數據鏈路層(data link layer)一般簡稱爲鏈路層。兩臺主機之間的數據傳輸,老是在一段一段的鏈路上傳送的,這就須要使用專門的鏈路層的協議。
在兩個相鄰節點之間傳送數據時,數據鏈路層將網絡層接下來的 IP 數據報組裝成幀,在兩個相鄰節點間的鏈路上傳送幀。每一幀包括數據和必要的控制信息(如同步信息,地址信息,差錯控制等)。

在接收數據時,控制信息使接收端可以知道一個幀從哪一個比特開始和到哪一個比特結束。

5、物理層

在物理層上所傳送的數據單位是比特。 物理層(physical layer)的做用是實現相鄰計算機節點之間比特流的透明傳送,儘量屏蔽掉具體傳輸介質和物理設備的差別。使其上面的數據鏈路層沒必要考慮網絡的具體傳輸介質是什麼。「透明傳送比特流」表示經實際電路傳送後的比特流沒有發生變化,對傳送的比特流來講,這個電路好像是看不見的。 在互聯網使用的各類協議中最重要和最著名的就是 TCP/IP 兩個協議。

同 OSI 七層協議模型、TCP/IP 四層模型的區別

  1. OSI 七層模型
    OSI七層協議模型主要是:
    應用層(Application)、表示層(Presentation)、會話層(Session)、傳輸層(Transport)、網絡層(Network)、數據鏈路層(Data Link)、物理層(Physical)。

  2. TCP/IP四層模型
    TCP/IP是一個四層的體系結構,主要包括:
    應用層、傳輸層、網絡層和鏈路層。

各層對應

如下一張圖很好的說明了這三種協議的區別

HTTP 與 HTTPS 的區別 TOP

區別 HTTP HTTPS
協議 運行在 TCP 之上,明文傳輸,客戶端與服務器端都沒法驗證對方的身份 身披 SSL( Secure Socket Layer )外殼的 HTTP,運行於 SSL 上,SSL 運行於 TCP 之上, 是添加了加密和認證機制的 HTTP
端口 80 443
資源消耗 較少 因爲加解密處理,會消耗更多的 CPU 和內存資源
開銷 無需證書 須要證書,而證書通常須要向認證機構購買
加密機制 共享密鑰加密和公開密鑰加密並用的混合加密機制
安全性 因爲加密機制,安全性強

對稱加密與非對稱加密

對稱密鑰加密是指加密和解密使用同一個密鑰的方式,這種方式存在的最大問題就是密鑰發送問題,即如何安全地將密鑰發給對方;
而非對稱加密是指使用一對非對稱密鑰,即公鑰和私鑰,公鑰能夠隨意發佈,但私鑰只有本身知道。發送密文的一方使用對方的公鑰進行加密處理,對方接收到加密信息後,使用本身的私鑰進行解密。
因爲非對稱加密的方式不須要發送用來解密的私鑰,因此能夠保證安全性;可是和對稱加密比起來,很是的慢.

綜上:咱們仍是用對稱加密來傳送消息,但對稱加密所使用的密鑰咱們能夠經過非對稱加密的方式發送出去。

HTTP2

HTTP2 能夠提升了網頁的性能。

在 HTTP1 中瀏覽器限制了同一個域名下的請求數量(Chrome 下通常是六個),當在請求不少資源的時候,因爲隊頭阻塞當瀏覽器達到最大請求數量時,剩餘的資源需等待當前的六個請求完成後才能發起請求。

HTTP2 中引入了多路複用的技術,這個技術能夠只經過一個 TCP 鏈接就能夠傳輸全部的請求數據。多路複用能夠繞過瀏覽器限制同一個域名下的請求數量的問題,進而提升了網頁的性能。

TCP/IP 協議 TOP

負責傳輸的 IP 協議

按層次分,IP(Internet Protocol)網際協議位於網絡層,IP 協議的做用是把各類數據包傳送給對方。而要保證確實傳送到對方那裏,則須要知足各種條件,其中兩個重要的條件是 IP 地址和 MAC 地址(Media Access Control Address)。

IP 地址和 MAC 地址: 指明瞭節點被分配到的地址,MAC 地址是指網卡所屬的固定地址,IP 地址能夠和 MAC 地址進行配對。IP 地址可變換,但 MAC 地址基本上不會更改。

使用 ARP 協議憑藉 MAC 地址進行通訊

  1. IP 間的通訊依賴 MAC 地址。
  2. ARP 是一種用以解釋地址的協議,根據通訊方的 IP 地址就能夠反查出對應方的 MAC 地址。

TCP 協議如何保持傳輸的可靠性

TCP提供一種面向鏈接的、可靠的字節流服務。
1. 面向鏈接
意味着兩個使用 TCP 的應用(一般是一個客戶和一個服務器)在彼此交換數據以前必須先創建一個 TCP 鏈接。在一個 TCP 鏈接中,僅有兩方進行彼此通訊;
2. 字節流服務
意味着兩個應用程序經過 TCP 鏈接交換 8bit 字節構成的字節流,TCP 不在字節流中插入記錄標識符。

TCP 之因此可靠,大致上因爲如下緣由:

  1. 數據包校驗:目的是檢測數據在傳輸過程當中的任何變化,若校驗出包有錯,則丟棄報文段而且不給出響應,這時 TCP 發送數據端超時後會重發數據;
  2. 對失序數據包重排序:既然 TCP 報文段做爲 IP 數據報來傳輸,而 IP 數據報的到達可能會失序,所以 TCP 報文段的到達也可能會失序。TCP 將對失序數據進行從新排序,而後才交給應用層;
  3. 丟棄重複數據:對於重複數據,可以丟棄重複數據;
  4. 應答機制:當 TCP 收到發自 TCP 鏈接另外一端的數據,它將發送一個確認。這個確認不是當即發送,一般將推遲幾分之一秒;
  5. 超時重發:當 TCP 發出一個段後,它啓動一個定時器,等待目的端確認收到這個報文段。若是不能及時收到一個確認,將重發這個報文段;
  6. 流量控制:TCP 鏈接的每一方都有固定大小的緩衝空間。TCP 的接收端只容許另外一端發送接收端緩衝區所能接納的數據,這能夠防止較快主機導致較慢主機的緩衝區溢出,這就是流量控制。

TCP/IP 通訊傳輸流

借用圖解 HTTP 一書中的圖文:

發送端在層與層之間傳輸數據時,每通過一層一定會加上一個該層的首部信息。反之,接收端在層與層之間傳輸數據時,每通過一層會把相關的首部信息去掉。

TCP 三次握手和四次揮手 TOP

TCP(Transmission Control Protocol 傳輸控制協議)是一種面向鏈接的、可靠的、基於字節流的傳輸層通訊協議,由 IETF 的 RFC793 定義。

三次握手

第一次握手:
創建鏈接時,向服務器發出鏈接請求報文,這是報文首部中的同部位 SYN = 1,同時選擇一個初始序列號 seq = x ,客戶端進程進入了 SYN-SENT (同步已發送狀態)狀態,等待服務器確認;
第二次握手:
服務器收到 syn 包後,若是贊成鏈接,則發出確認報文; 確認報文 ACK = 1,SYN = 1,確認號是 ack = x + 1,同時也要爲本身初始化一個序列號 seq = y,此時服務器進程進入了 SYN-RCVD(同步收到)狀態;
第三次握手:
客戶端收到服務器的 SYN+ACK 包,要向服務器給出確認。確認報文的 ACK = 1,ack = y + 1,本身的序列號 seq = x + 1,此時,TCP 鏈接創建,客戶端進入 ESTABLISHED (已創建鏈接)狀態。

完成三次握手,客戶端與服務器開始傳送數據。

注:
seq:"sequance" 序列號;
ack:"acknowledge" 確認號;
SYN:"synchronize" 請求同步標誌;
ACK:"acknowledge" 確認標誌;
FIN:"Finally" 結束標誌。

未鏈接隊列
在三次握手協議中,服務器維護一個未鏈接隊列,該隊列爲每一個客戶端的SYN包(syn=j)開設一個條目,該條目代表服務器已收到SYN包,並向客戶端發出確認,正在等待客戶端的確認包。這些條目所標識的鏈接在服務器處於 SYN_RECV狀態,當服務器收到客戶端的確認包時,刪除該條目,服務器進入ESTABLISHED狀態。

創建一個鏈接須要三次握手,而終止一個鏈接要通過四次揮手,這是由 TCP 的半關閉(half-close)形成的。

四次揮手

第一次揮手:
客戶端進程發出鏈接釋放報文,而且中止發送數據。釋放數據報文首部 FIN=1,其序列號爲 seq = u(等於前面已經傳送過來的數據的最後一個字節的序號加1),此時,客戶端進入 FIN-WAIT-1(終止等待1)狀態。

第二次揮手:
服務器收到鏈接釋放報文,發出確認報文,ACK = 1,ack = u + 1,而且帶上本身的序列號 seq = v,此時,服務端就進入了 CLOSE-WAIT(關閉等待)狀態。

TCP 服務器通知高層的應用進程,客戶端向服務器的方向就釋放了,這時候處於半關閉狀態,即客戶端已經沒有數據要發送了,可是服務器若發送數據,客戶端依然要接受。這個狀態還要持續一段時間,也就是整個 CLOSE-WAIT 狀態持續的時間。
客戶端收到服務器的確認請求後,此時,客戶端就進入 FIN-WAIT-2(終止等待2)狀態,等待服務器發送鏈接釋放報文(在這以前還須要接受服務器發送的最後的數據)。

第三次揮手:
服務器將最後的數據發送完畢後,就向客戶端發送鏈接釋放報文,FIN = 1,ack = u + 1,因爲在半關閉狀態,服務器極可能又發送了一些數據,假定此時的序列號爲 seq = w,此時,服務器就進入了 LAST-ACK(最後確認)狀態,等待客戶端的確認。

第四次揮手:
客戶端收到服務器的鏈接釋放報文後,必須發出確認,ACK = 1,ack = w + 1,而本身的序列號是 seq = u + 1,此時,客戶端就進入了 TIME-WAIT(時間等待)狀態。

注意此時 TCP 鏈接尚未釋放,必須通過 2MSL(最長報文段壽命)的時間後,當客戶端撤銷相應的 TCB 後,才進入 CLOSED 狀態。

服務器只要收到了客戶端發出的確認,當即進入 CLOSED 狀態。一樣,撤銷 TCB 後,就結束了此次的 TCP 鏈接。

能夠看到,服務器結束 TCP 鏈接的時間要比客戶端早一些。

四次的緣由

這是由於服務端的 LISTEN 狀態下的 SOCKET 當收到 SYN 報文的建連請求後,它能夠把 ACK 和 SYN(ACK 起應答做用,而 SYN 起同步做用)放在一個報文裏來發送。 但關閉鏈接時,當收到對方的 FIN 報文通知時,它僅僅表示對方沒有數據發送給你了;但未必你全部的數據都所有發送給對方了,因此你未必會立刻會關閉 SOCKET ,也即你可能還須要發送一些數據給對方以後,再發送 FIN 報文給對方來表示你贊成如今能夠關閉鏈接了,因此它這裏的 ACK 報文和 FIN 報文多數狀況下都是分開發送的.

因爲 TCP 鏈接是全雙工的,所以每一個方向都必須單獨進行關閉。這個原則是當一方完成它的數據發送任務後就能發送一個 FIN 來終止這個方向的鏈接。收到一個 FIN 只意味着這一方向上沒有數據流動,一個 TCP 鏈接在收到一個 FIN 後仍能發送數據。首先進行關閉的一方將執行主動關閉,而另外一方執行被動關閉。

DNS 域名解析 TOP

當你在瀏覽器的地址欄輸入 https://juejin.im 後會發生什麼,你們在心中確定是有一個大概的,這裏我將 DNS 域名解析 這個步驟詳細的講一遍。在講概念以前我先放上一張經典的圖文供你們思考一分鐘。

查找域名對應的 IP 地址的具體過程

  1. 瀏覽器搜索本身的 DNS 緩存(瀏覽器維護一張域名與 IP 地址的對應表);若是沒有命中,進入下一步;
  2. 搜索操做系統中的 DNS 緩存;若是沒有命中,進入下一步;
  3. 搜索操做系統的 hosts 文件( Windows 環境下,維護一張域名與 IP 地址的對應表);若是沒有命中,進入下一步;
  1. 操做系統將域名發送至 LDNS (本地區域名服務器),LDNS 查詢本身的 DNS 緩存(通常命中率在 80% 左右),查找成功則返回結果,失敗則發起一個迭代 DNS 解析請求:
  2. LDNS向 Root Name Server(根域名服務器,如com、net、im 等的頂級域名服務器的地址)發起請求,此處,Root Name Server 返回 im 域的頂級域名服務器的地址;
  3. LDNS 向 im 域的頂級域名服務器發起請求,返回 juejin.im 域名服務器地址;
  4. LDNS 向 juejin.im 域名服務器發起請求,獲得 juejin.im 的 IP 地址;
  5. LDNS 將獲得的 IP 地址返回給操做系統,同時本身也將 IP 地址緩存起來;操做系統將 IP 地址返回給瀏覽器,同時本身也將 IP 地址緩存起來。

DNS Prefetch

即 DNS 預獲取,是前端優化的一部分。通常來講,在前端優化中與 DNS 有關的有兩點:

  1. 減小 DNS 的請求次數
  2. 進行 DNS 預獲取

典型的一次 DNS 解析須要耗費 20-120 毫秒,減小DNS解析時間和次數是個很好的優化方式。DNS Prefetching 是讓具備此屬性的域名不須要用戶點擊連接就在後臺解析,而域名解析和內容載入是串行的網絡操做,因此這個方式能減小用戶的等待時間,提高用戶體驗。

五類 IP 地址 TOP

詳見 下一篇

跨域的緣由及處理方式 TOP

詳見下一篇

正向代理和反向代理 TOP

詳見下一篇

CDN 帶來的性能優化 TOP

詳見下一篇

HTTP 強緩存&協商緩存 TOP

詳見下一篇

若是你看完了,還不過癮的話;我推薦你看下我寫的兩篇關於繼承的文章,看完以後,想必你會有一個新的認識。
【前端詞典】繼承(一) - 面試官問的你都會嗎?
【前端詞典】繼承(二) - 回的八種寫法·面試必問

參考

  1. 《圖解 HTTP》
  2. 《計算機網絡基礎》
  3. blog.csdn.net/qzcsu/artic…
  4. segmentfault.com/a/119000001…
  5. developer.mozilla.org/zh-CN/docs/…

前端詞典系列

《前端詞典》這個系列會持續更新,每一期我都會講一個出現頻率較高的知識點。但願你們在閱讀的過程中能夠斧正文中出現不嚴謹或是錯誤的地方,本人將不勝感激;若經過本系列而有所得,本人亦將不勝欣喜。

若是你以爲個人文章寫的還不錯,能夠關注個人微信公衆號,公衆號裏會提早劇透呦。

你也能夠添加個人微信 wqhhsd, 歡迎交流。

下期預告

【前端詞典】進階必備的網絡基礎(下)

傳送門

  1. 【前端詞典】和媳婦講代理後的意外收穫
  2. 【前端詞典】滾動穿透問題的解決方案
  3. 繼承(一) - 原型鏈你真的懂嗎?
  4. 【前端詞典】繼承(二) - 回的八種寫法·面試必問
  5. 【前端詞典】進階必備的網絡基礎(下)
相關文章
相關標籤/搜索