網路請求與瀏覽器渲染

@yu19941994

Published in

@yu19941994

6 min readApr 26, 2021

1. OSI 模型及 DoD 模型

想了解上述這個問題，讓我們先來看看「網路互連的原理」

國際標準化組織 (ISO, International Organization for Standardization) 在 1984 年提出 OSI 模型 (Open System Interconnection Model)。用以制定全球電腦網路互連 的標準框架，一共分成七層。詳細各層分別做什麼，可至 OSI 模型維基百科了解，因為內容很生硬，這篇作者寫的文章有以郵件收發的過程來類比 OSI 模型，可以更方便理解。

(冷知識補充：啊因為這七層有點難記憶，對岸發明了口訣來記憶這七層的字首：All People Seem To Need Data Processing)

而因為此七層模型太難記憶，還有另一個模型叫做 DoD 模型(又稱為 TCP/IP 四層模型)，是由美國國防部的 ARPA 專案所制定，可以說 DoD 是簡化版的 OSI

圖左至右依序為 OSI 模型、DoD 模型、各層級的 TCP/IP 協定組合(中文版)

圖左至右依序為 OSI 模型、DoD 模型、各層級的 TCP/IP 協定組合(英文版)

2. 詳細理解 DoD 模型與網路互連的關聯

那麼網路發送請求時，如何用 DoD 模型來做解釋呢?

首先，使用者端會發出 HTTP 請求(裡面包含了使用者資料)；然後到了傳輸層再加上 TCP 表頭；到了網路層，再加上 IP 表頭；到了網路連結層，再加上乙太表頭，整體會變成一個網路封包，再整包傳給伺服器端，一層層往上處理至 Server。

那如果傳送的是含 TCP 表頭的網路封包(因為也有可能傳送的是含 UDP 表頭的封包)，必須要經過「三向交握」來建立連線。三向交握簡單來說就是使用者端會發出 SYN 封包給伺服器，伺服器再回傳 SYN/ACK 封包給使用者，使用者端再傳送 ACK 封包。如此三次來回，即可開始傳輸封包

完成三向交握後，就可以開始傳送 TCP 封包。而直到封包傳送完，回傳 200 OK 狀態碼，才表示資料傳送完成。傳送完封包，瀏覽器便開始渲染網頁。

這時如果還欲傳送其他資料，就從下圖中的第 2 點至第 4 點再重複一次，直到所以資料都傳送完，進行 TCP 四次揮手，終止連線。

(可使用 WireShark 工具來查看完整封包傳送的流程)

(補充：若請求的網站為 HTTPS，則表示其為加密網站，在傳輸層及應用層多了一道 SSL / TLS 憑證。此網站使用 WireShark 去監測封包，會看不到封包內容，比較安全；若為 HTTP 網站，則表示沒有加上 SSL / TLS 憑證。HTTP 是走 80 port；HTTPS 則走 443 port)

3. 瀏覽器的渲染過程

承上圖的第 4 點「瀏覽器渲染網頁」，接著我們來理解此過程

在 Client 端收到回傳的資料後，會先解析(parse) JavaScript、HTML、CSS，將 HTML 解析成 HTML DOM Tree、CSS 解析成 CSSOM Tree，再將這些 Tree 結合成 Render Tree；接著瀏覽器將布局結構(Layout)給拉出來；並把樣式給繪製(Paint)上去；最後合併圖層(Composite)。完成瀏覽器的渲染過程。