從下載資源到渲染頁面的瀏覽器工作流程 Part 2

回顧前一部分

如果您尚未閱讀前一部分，我建議您先閱讀，但讓我們回顧一下主要步驟： 當使用者在瀏覽器中輸入網址時，瀏覽器會經過以下步驟：

1. 檢查瀏覽器 DNS 快取，如果沒有結果，進入步驟 2。
2. 檢查作業系統 DNS 快取，如果沒有結果，進入步驟 3。
3. 查詢 ISP DNS 伺服器，它會遞迴經過根 DNS 伺服器、TLD DNS 伺服器和權威 DNS 伺服器來獲取網域名稱的 IP 位址，然後更新快取。
4. 將 IP 位址返回給瀏覽器。

在請求資源之前

通常，瀏覽器會需要頁面的三種類型資源：

• HTML
• CSS
• JavaScript

但在請求資源之前，有兩個重要步驟，讓我們來詳細說明：

1. 建立 TCP 連線
2. HTTPS 檢查

建立連線並發送請求

TCP 是 傳輸控制協定（Transmission Control Protocol） 的簡稱，它是一種面向連線的協定，這表示它需要在發送資料前建立連線，並確保資料可靠且有序地傳遞。在這個步驟中，瀏覽器會：

• 進行三向交握（Three-way handshake）
• 進行 HTTPS 檢查

一旦連線建立且沒有錯誤發生，瀏覽器將向伺服器發送請求。

什麼是三向交握？

三向交握是建立客戶端和伺服器之間連線的過程。它包含三個訊息：

👋🏽 第一次交握

• 客戶端到伺服器
• 發送 SYN 封包
• 告訴伺服器「我想要連線到你那邊」

👋🏽 第二次交握

• 伺服器到客戶端
• 發送 SYN-ACK 封包
• 告訴客戶端「好的，我收到了你的 SYN 封包，我準備好連線到你那邊了」

👋🏽 第三次交握

• 客戶端到伺服器
• 發送 ACK 封包
• 告訴伺服器「我也收到了，我們現在可以開始傳送資料了」

客戶端                             伺服器
   |                               |
   |        SYN (seq=x)           |
   |------------------------------>|
   |                               |
   |    SYN+ACK (seq=y, ack=x+1)  |
   |<------------------------------|
   |                               |
   |        ACK (ack=y+1)         |
   |------------------------------>|
   |                               |

在三向交握過程中可能會發生一些潛在問題，但我們會在未來討論這些問題。

HTTP/HTTPS 檢查

當連線是 HTTP 時：

• 獲取 IP 位址
• TCP 連線（三向交握）
• 直接發送 HTTP 請求
• 接收回應
• 關閉或保持連線

當連線是 HTTPS 時：

• 獲取 IP 位址
• TCP 連線（三向交握）
• TLS（傳輸層安全協定）交握（簡短版本）：
  • 👋🏽 協商加密演算法
  • 👋🏽 交換憑證
  • 👋🏽 生成共享密鑰
• 透過加密連線發送 HTTP 請求
• 接收加密回應
• 關閉或保持連線

最後，請求資源

HTML 檔案

一旦連線建立，瀏覽器將請求的第一個資源是 HTML 檔案，這是頁面的結構。接收到 HTML 檔案後，它會解析 HTML 並建立 DOM 樹。

CSS 檔案

我們知道有兩種編寫 CSS 的方式：

• 內部（Inline）
• 外部（External）

<!-- internal CSS -->
<style>
  .class {
    color: red;
  }
</style>
 
<!-- external CSS -->
<link rel="stylesheet" href="styles.css" />

雖然 HTML 和 CSS 是不同的資源，但當瀏覽器解析 HTML 並遇到任何內部 CSS 或外部 CSS 時，它會請求 CSS 檔案，但這不會阻止瀏覽器解析 HTML，它們是並行解析的。 接收到 CSS 檔案後，瀏覽器會解析 CSS 檔案，並建立 CSSOM 樹。 以下是流程的樣子：

解析 HTML ─────────────────────────────────────► 完成 DOM
     │
     └── 遇到 CSS ─── 下載 CSS ─── 解析 CSS ──► 完成 CSSOM

JavaScript 檔案

當遇到 JavaScript 檔案時，瀏覽器會停止解析 HTML，下載 JavaScript 檔案，並執行 JavaScript 程式碼。

結論

在本文中，我們回顧了在獲取 IP 位址後，瀏覽器會進行三向交握以建立連線，然後檢查連線是 HTTP 還是 HTTPS。如果是 HTTP，它會直接發送請求；如果是 HTTPS，它會進行 TLS 交握，然後發送請求。 之後，瀏覽器會請求 HTML 檔案，然後是 CSS 檔案，最後是 JavaScript 檔案。 在下一篇文章中，我想更詳細地談談渲染頁面的過程。