【前端】使用者進入網頁，瀏覽器將網頁內容呈現在畫面上的過程

當使用者在網頁上瀏覽一個 HTML 頁面時，從 HTML 轉換成 DOM 並渲染到網頁上的過程涉及幾個關鍵步驟。以下是這個過程的詳細描述：

1. 下載 HTML

使用者在瀏覽器中輸入 URL 或點擊連結，瀏覽器向伺服器發送請求 (HTTP Request)，伺服器回傳 HTML 檔案。這是網頁內容的原始格式。

2. HTML 解析

瀏覽器接收到 HTML 後，開始解析 (parsing) HTML 檔案。解析的過程中，瀏覽器會逐行讀取 HTML，將其轉換為一個內部的資料結構，稱為 DOM (Document Object Model)。

• HTML 標籤被解析成節點 (node)，每個標籤對應一個 DOM 節點。

• 瀏覽器會按照 HTML 的結構，建立一個樹狀的 DOM 結構，稱為 DOM 樹 (DOM Tree)。DOM 樹描述了 HTML 文件中每個元素之間的層次結構。

3. 建立 CSSOM

同時，瀏覽器也會載入並解析 CSS 檔案（內嵌或外部），建立一個 CSS 規則的內部結構，稱為 CSSOM (CSS Object Model)。這是一棵描述 CSS 規則的樹狀結構，用來定義元素的樣式。

4. 合併 DOM 和 CSSOM

一旦 DOM 和 CSSOM 都建立完成，瀏覽器會將這兩個結構合併成一個 渲染樹 (Render Tree)。渲染樹只包含在頁面上顯示的節點（例如 display: none 的元素不會出現在渲染樹中），並將每個元素的樣式應用到節點上。

5. 佈局 (Layout)

在渲染樹建立後，瀏覽器開始計算每個元素的位置和大小。這個過程稱為 佈局 或 回流 (reflow)。瀏覽器會決定每個元素應該在螢幕上的確切位置。

6. 繪製 (Painting)

當佈局完成後，瀏覽器開始進行繪製，這個步驟將渲染樹中的每個節點轉換為實際的像素。這包括應用顏色、邊框、文字等視覺樣式。

7. 顯示到螢幕

最終，瀏覽器將繪製的結果顯示在螢幕上。使用者此時就能看到完整渲染的網頁。

簡單概括

1. 下載 HTML → 2. 解析 HTML 轉成 DOM → 3. 解析 CSS 轉成 CSSOM → 4. 合併 DOM 和 CSSOM 建立渲染樹 → 5. 佈局 → 6. 繪製 → 7. 顯示到螢幕

注意事項

• 如果 HTML 中包含 JavaScript，瀏覽器會在解析 DOM 過程中根據 JavaScript 影響 DOM 結構。

• 瀏覽器會依次處理每個步驟，但也會根據需求優化渲染順序，比如預先繪製部分可見區域，讓頁面更快顯示。

這個流程解釋了從 HTML 文件轉換到螢幕上所見內容的完整過程。

本文由 ChatGPT 產生