文章目錄
總結
- DNS 解析:將域名解析成 IP 地址
- TCP 連接：TCP 三次握手
- 發送 HTTP 請求
- 服務器處理請求並返回 HTTP 報文
- 瀏覽器解析渲染頁面
- 斷開連接：TCP 四次揮手
背景
URL格式：scheme://host.domain:port/path/filename
scheme - 定義因特網服務的類型。常見的協議有 http、https、ftp、file，其中最常見的類型是 http，而 https 則是進行加密的網絡傳輸。
host - 定義域主機（http 的默認主機是 www，可省略）
domain - 定義因特網域名，比如 w3school.com.cn
port - 定義主機上的端口號（http 的默認端口號是 80）
path - 定義服務器上的路徑（如果省略，則文檔必須位於網站的根目錄中）。
filename - 定義文檔/資源的名稱
1、域名解析
DNS 協議提供通過域名查找 IP 地址，或逆向從 IP 地址反查域名的服務。DNS 是一個網絡服務器，我們的域名解析簡單來說就是在 DNS 上記錄一條信息記錄。
例如：
baidu.com 220.114.23.56（服務器外網IP地址）80（服務器端口號）
除非特殊情況，最快的DNS永遠是您使用網絡寬帶運營商所提供的DNS服務器地址。當然你也可以改爲一些公共的DNS服務器
2、TCP 三次握手
客戶端發送一個帶 SYN=1，Seq=X 的數據包到服務器端口（第一次握手，由瀏覽器發起，告訴服務器我要發送請求了）
服務器發回一個帶 SYN=1， ACK=X+1， Seq=Y 的響應包以示傳達確認信息（第二次握手，由服務器發起，告訴瀏覽器我準備接受了，你趕緊發送吧）
客戶端再回傳一個帶 ACK=Y+1， Seq=Z 的數據包，代表“握手結束”（第三次握手，由瀏覽器發送，告訴服務器，我馬上就發了，準備接受吧）
3、發送 HTTP 請求
TCP 三次握手結束後，開始發送 HTTP 請求報文。
請求報文由請求行（request line）、請求頭（header）、請求體三個部分組成：
請求行舉例：POST /chapter17/user.html HTTP/1.1
請求頭舉例：user-agent: Mozilla/5.0
請求體舉例：name=tom&password=1234&realName=tomson
4、服務器處理請求並返回 HTTP 報文
服務器：
服務器上安裝的 web 服務器軟件，如：apache、nginx、IIS 等等。這些軟件擔任管理員的角色，對於不同用戶發送的請求，會結合配置文件，把不同請求委託給服務器上處理相應請求的程序進行處理（例如 CGI 腳本，JSP 腳本，servlets，ASP 腳本，服務器端 JavaScript，或者一些其它的服務器端技術等），然後返回後臺程序處理產生的結果作爲響應。
MVC後臺處理階段：
首先瀏覽器發送過來的請求先經過控制器，控制器進行邏輯處理和請求分發，接着會調用模型，這一階段模型會獲取 redis db 以及 MySQL 的數據，獲取數據後將渲染好的頁面，響應信息會以響應報文的形式返回給客戶端，最後瀏覽器通過渲染引擎將網頁呈現在用戶面前。
http 響應報文：
響應報文由響應行（request line）、響應頭部（header）、響應主體三個部分組成。
- 響應行包含：協議版本，狀態碼，狀態碼描述
- 響應頭包含：響應報文的附加信息，由 名/值 對組成
- 響應體包含：包含回車符、換行符和響應返回數據，並不是所有響應報文都有響應數據
瀏覽器解析渲染頁面
瀏覽器解析渲染頁面分爲一下五個步驟：
根據 HTML 解析出 DOM 樹
根據 CSS 解析生成 CSS 規則樹
結合 DOM 樹和 CSS 規則樹，生成渲染樹
根據渲染樹計算每一個節點的信息
根據計算好的信息繪製頁面
1.根據 HTML 解析 DOM 樹
根據 HTML 的內容，將標籤按照結構解析成爲 DOM 樹，DOM 樹解析的過程是一個深度優先遍歷。即先構建當前節點的所有子節點，再構建下一個兄弟節點。
在讀取 HTML 文檔，構建 DOM 樹的過程中，若遇到 script 標籤，則 DOM 樹的構建會暫停，直至腳本執行完畢。
2.根據 CSS 解析生成 CSS 規則樹
解析 CSS 規則樹時 js 執行將暫停，直至 CSS 規則樹就緒。
瀏覽器在 CSS 規則樹生成之前不會進行渲染。
3.結合 DOM 樹和 CSS 規則樹，生成渲染樹
DOM 樹和 CSS 規則樹全部準備好了以後，瀏覽器纔會開始構建渲染樹。
精簡 CSS 並可以加快 CSS 規則樹的構建，從而加快頁面相應速度。
4.根據渲染樹計算每一個節點的信息（佈局）
佈局：通過渲染樹中渲染對象的信息，計算出每一個渲染對象的位置和尺寸
迴流：在佈局完成後，發現了某個部分發生了變化影響了佈局，那就需要倒回去重新渲染。
5.根據計算好的信息繪製頁面
繪製階段，系統會遍歷呈現樹，並調用呈現器的“paint”方法，將呈現器的內容顯示在屏幕上。
重繪：某個元素的背景顏色，文字顏色等，不影響元素周圍或內部佈局的屬性，將只會引起瀏覽器的重繪。
迴流：某個元素的尺寸發生了變化，則需重新計算渲染樹，重新渲染。
斷開連接（四次揮手）
- 發起方向被動方發送報文，Fin、Ack、Seq，表示已經沒有數據傳輸了。並進入 FIN_WAIT_1 狀態。(第一次揮手：由瀏覽器發起的，發送給服務器，我請求報文發送完了，你準備關閉吧)
- 被動方發送報文，Ack、Seq，表示同意關閉請求。此時主機發起方進入 FIN_WAIT_2 狀態。(第二次揮手：由服務器發起的，告訴瀏覽器，我請求報文接受完了，我準備關閉了，你也準備吧)
- 被動方向發起方發送報文段，Fin、Ack、Seq，請求關閉連接。並進入 LAST_ACK 狀態。(第三次揮手：由服務器發起，告訴瀏覽器，我響應報文發送完了，你準備關閉吧)
- 發起方向被動方發送報文段，Ack、Seq。然後進入等待 TIME_WAIT 狀態。被動方收到發起方的報文段以後關閉連接。發起方等待一定時間未收到回覆，則正常關閉。(第四次揮手：由瀏覽器發起，告訴服務器，我響應報文接受完了，我準備關閉了，你也準備吧)