## 開啟網絡線程到發出一個完整的 http 請求
這一部分主要內容包括:`dns`查詢,`tcp/ip`請求構建,`五層因特網協議棧`等等
仍然是先梳理主干,有些詳細的過程不展開(因為展開的話內容過多)
### DNS 查詢得到 IP
如果輸入的是域名,需要進行dns解析成IP,大致流程:
- 如果瀏覽器有緩存,直接使用瀏覽器緩存,否則使用本機緩存,再沒有的話就是用host
- 如果本地沒有,就向dns域名服務器查詢(當然,中間可能還會經過路由,也有緩存等),查詢到對應的IP
注意,域名查詢時有可能是經過了CDN調度器的(如果有cdn存儲功能的話)
而且,需要知道dns解析是很耗時的,因此如果解析域名過多,會讓首屏加載變得過慢,可以考慮`dns-prefetch`優化
這一塊可以深入展開,具體請去網上搜索,這里就不占篇幅了(網上可以看到很詳細的解答)
### tcp/ip請求
http的本質就是`tcp/ip`請求
需要了解3次握手規則建立連接以及斷開連接時的四次揮手
tcp將http長報文劃分為短報文,通過三次握手與服務端建立連接,進行可靠傳輸
**三次握手的步驟:(抽象派)**
```
客戶端:hello,你是server么?
服務端:hello,我是server,你是client么
客戶端:yes,我是client
```
建立連接成功后,接下來就正式傳輸數據
然后,待到斷開連接時,需要進行四次揮手(因為是全雙工的,所以需要四次揮手)
**四次揮手的步驟:(抽象派)**
```
主動方:我已經關閉了向你那邊的主動通道了,只能被動接收了
被動方:收到通道關閉的信息
被動方:那我也告訴你,我這邊向你的主動通道也關閉了
主動方:最后收到數據,之后雙方無法通信
```
**tcp/ip的并發限制**
瀏覽器對同一域名下并發的tcp連接是有限制的(2-10個不等)
而且在http1.0中往往一個資源下載就需要對應一個tcp/ip請求
所以針對這個瓶頸,又出現了很多的資源優化方案
**get和post的區別**
get和post雖然本質都是tcp/ip,但兩者除了在http層面外,在tcp/ip層面也有區別。
get會產生一個tcp數據包,post兩個
具體就是:
- get請求時,瀏覽器會把`headers`和`data`一起發送出去,服務器響應200(返回數據),
- post請求時,瀏覽器先發送`headers`,服務器響應`100 continue`, 瀏覽器再發送`data`,服務器響應200(返回數據)。
再說一點,這里的區別是`specification`(規范)層面,而不是`implementation`(對規范的實現)
### 五層因特網協議棧
其實這個概念挺難記全的,記不全沒關系,但是要有一個整體概念
其實就是一個概念: **從客戶端發出http請求到服務器接收,中間會經過一系列的流程。**
簡括就是:
**從應用層的發送http請求,到傳輸層通過三次握手建立tcp/ip連接,再到網絡層的ip尋址,再到數據鏈路層的封裝成幀,最后到物理層的利用物理介質傳輸。**
當然,服務端的接收就是反過來的步驟
五層因特網協議棧其實就是:
```
1.應用層(dns,http) DNS解析成IP并發送http請求
2.傳輸層(tcp,udp) 建立tcp連接(三次握手)
3.網絡層(IP,ARP) IP尋址
4.數據鏈路層(PPP) 封裝成幀
5.物理層(利用物理介質傳輸比特流) 物理傳輸(然后傳輸的時候通過雙絞線,電磁波等各種介質)
```
當然,其實也有一個完整的OSI七層框架,與之相比,多了會話層、表示層。
OSI七層框架:`物理層`、`數據鏈路層`、`網絡層`、`傳輸層`、`會話層`、`表示層`、`應用層`
```
表示層:主要處理兩個通信系統中交換信息的表示方式,包括數據格式交換,數據加密與解密,數據壓縮與終端類型轉換等
會話層:它具體管理不同用戶和進程之間的對話,如控制登陸和注銷過程
```
- Web 開發筆記
- 從輸入 URL 到頁面加載完成的過程中都發生了什么事情?
- 從瀏覽器接收url到開啟網絡請求線程
- 開啟網絡線程到發出一個完整的http請求
- 從服務器接收到請求到對應后臺接收到請求
- 后臺和前臺的http交互
- http的緩存
- 解析頁面流程
- HTML解析,構建DOM
- CSS解析,構建CSSOM
- 資源外鏈的下載
- CSS的可視化格式模型
- 包含塊(Containing Block)
- 控制框(Controlling Box)
- BFC(Block Formatting Context)
- IFC(Inline Formatting Context)
- 其它
- JS引擎解析過程
- JS的解釋階段
- JS的預處理階段
- JS的執行階段
- 回收機制
- 參考資料
- JavaScript模塊化編程
- AMD
- requireJS
- CommonJS
- UMD
- ES6模塊
- 參考資料
- 使用 JavaScript 實現一門編程語言
- 如何使用 JavaScript 實現一門編程語言(1) —— 前言
- 如何使用 JavaScript 實現一門編程語言(2) —— 編寫一個解析器
- 如何使用 JavaScript 實現一門編程語言(3) —— Input stream
- 如何使用 JavaScript 實現一門編程語言(4) —— Token stream
- 如何使用 JavaScript 實現一門編程語言(5) —— AST
- 如何使用 JavaScript 實現一門編程語言(6) —— Interpreter
- 完整代碼
- 參考資料
- 前端布局概論
- 參考資料
- Windows 筆記
- 錯誤解決
- win10應用商店無法登錄提示0x80070426解決方法
- 使用技巧
- 設置 Hyper-V 和 VMware 共存
- Powershell
- WSL