什麼是瀏覽器的渲染引擎？

瀏覽器的渲染引擎（Rendering Engine）是瀏覽器核心的一部分，負責將 HTML、CSS 和 JavaScript 轉換成使用者在螢幕上看到的網頁畫面。它解析網頁的原始碼（HTML 和 CSS），建構 DOM（文件物件模型）和 CSSOM（CSS 物件模型），並最終將這些內容渲染為視覺化的頁面。

不同瀏覽器使用的渲染引擎不同，以下是常見的瀏覽器及其對應的渲染引擎（截至 2025 年 9 月）：

Google Chrome、Microsoft Edge、Opera：使用 Blink 渲染引擎。
Mozilla Firefox：使用 Gecko 渲染引擎。
Apple Safari：使用 WebKit 渲染引擎。
舊版 Internet Explorer：使用 Trident 渲染引擎（新版 Edge 已改用 Blink）。

瀏覽器渲染引擎的工作流程

渲染引擎的工作流程可以分為幾個主要步驟。以下我會詳細說明每個步驟，並確保你能理解每個階段的作用：

1. 解析 HTML 並建構 DOM 樹

發生什麼事？ 渲染引擎首先解析 HTML 文件，將其轉換成 DOM 樹（Document Object Model）。DOM 樹是一個樹狀結構，代表 HTML 文件中的所有元素（例如 <div>、<p>、<img> 等）。
細節：
- 當瀏覽器收到 HTML 文件的原始碼時，會逐行解析。
- 每個 HTML 標籤（Tag）會被轉換成一個節點（Node），並形成樹狀結構。
- 如果遇到 <script> 標籤，解析可能會暫停（除非使用 async 或 defer 屬性），因為 JavaScript 可能會改變 DOM 結構。

簡單範例：假設你有以下 HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>我的網頁</title>
  </head>
  <body>
    <h1>歡迎</h1>
    <p>這是一個段落</p>
  </body>
</html>

渲染引擎會將其轉換成以下 DOM 樹：

Document
└── html
    ├── head
    │   └── title
    │       └── 文字: "我的網頁"
    └── body
        ├── h1
        │   └── 文字: "歡迎"
        └── p
            └── 文字: "這是一個段落"

2. 解析 CSS 並建構 CSSOM 樹

發生什麼事？ 渲染引擎同時解析 CSS 文件（包括內聯、外聯或 <style> 標籤中的 CSS），並建構 CSSOM 樹（CSS Object Model）。CSSOM 描述了每個 DOM 元素的樣式規則。
細節：
- CSS 解析是獨立的，但會與 DOM 解析並行進行。
- 每個 DOM 節點會對應到 CSSOM 中的樣式規則。
- CSSOM 建構完成後，會與 DOM 樹結合，形成最終的渲染樹（Render Tree）。
簡單範例：假設你有以下 CSS：
```
h1 {
  color: blue;
  font-size: 24px;
}
p {
  color: black;
  font-size: 16px;
}
```
CSSOM 會將這些規則映射到對應的 DOM 節點。

3. 建構渲染樹（Render Tree）

發生什麼事？ 渲染引擎將 DOM 樹和 CSSOM 樹結合，生成 渲染樹。渲染樹只包含需要顯示的節點（例如隱藏的元素如 display: none 不會出現在渲染樹中）。
細節：
- 渲染樹是 DOM 和 CSSOM 的子集，只包含可視化的元素。
- 每個渲染樹節點都包含了對應的樣式資訊。

4. 佈局（Layout 或 Reflow）

發生什麼事？ 渲染引擎根據渲染樹計算每個元素在螢幕上的確切位置和大小（例如寬度、高度、邊距等）。這個過程也稱為 Reflow。
細節：
- 佈局是從根節點（通常是 <html>）開始，遞迴計算每個節點的幾何資訊。
- 如果螢幕大小改變（例如調整視窗大小）或 DOM/CSSOM 改變，會觸發重新佈局（Reflow），這是一個耗費資源的過程。

5. 繪製（Painting）

發生什麼事？ 渲染引擎將渲染樹的每個節點轉換成螢幕上的實際像素（例如顏色、圖片、文字等）。這個過程稱為 Painting。
細節：
- 繪製會考慮 CSS 樣式（如背景色、邊框、陰影等）。
- 如果有動畫或過渡效果，可能會多次觸發重繪（Repaint）。

6. 合成（Compositing，視情況而定）

發生什麼事？ 現代瀏覽器會將頁面分成多個圖層（Layers），並在 GPU 上進行合成，以提高渲染效率。
細節：
- 例如，動畫元素可能被提升到單獨的圖層，減少重繪的成本。
- 合成階段由瀏覽器的 合成器（Compositor） 負責。

如何優化渲染性能（給前端工程師的建議）

作為前端工程師，了解渲染流程後，你可以採取以下方法來優化網頁性能，特別是針對渲染引擎的工作：

1. 減少 DOM 操作

過多的 DOM 操作會觸發 Reflow 和 Repaint，影響性能。

實作方式（使用 JavaScript）：假設你需要動態新增多個列表項目，避免逐一操作 DOM，可以使用 DocumentFragment 來批量處理：

// 不推薦：逐一新增 DOM 元素
const ul = document.querySelector("ul");
for (let i = 0; i < 10; i++) {
  const li = document.createElement("li");
  li.textContent = `項目 ${i + 1}`;
  ul.appendChild(li); // 每次 appendChild 都會觸發 Reflow
}

// 推薦：使用 DocumentFragment
const fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
  const li = document.createElement("li");
  li.textContent = `項目 ${i + 1}`;
  fragment.appendChild(li);
}
ul.appendChild(fragment); // 一次性新增，只觸發一次 Reflow

2. 優化 CSS

避免使用複雜的 CSS 選擇器，減少 CSSOM 建構時間。
使用高效的屬性，例如 transform 和 opacity（這些屬性只觸發合成，不觸發 Reflow 或 Repaint）。

範例（CSS 動畫）：

/* 不推薦：改變寬高會觸發 Reflow */
.box {
  width: 100px;
  height: 100px;
  transition: width 0.3s;
}
.box:hover {
  width: 150px;
}

/* 推薦：使用 transform 僅觸發合成 */
.box {
  width: 100px;
  height: 100px;
  transition: transform 0.3s;
}
.box:hover {
  transform: scale(1.5);
}

3. 異步載入 JavaScript

使用 async 或 defer 屬性來避免 JavaScript 阻塞 HTML 解析。

範例：

<!-- 異步載入，不阻塞 DOM 解析 -->
<script async src="script.js"></script>

<!-- 延遲載入，直到 DOM 解析完成 -->
<script defer src="script.js"></script>

4. 圖層管理

使用 will-change 屬性告訴瀏覽器哪些元素可能會改變，提前提升到獨立圖層：
```
.animated-element {
  will-change: transform, opacity;
}
```

常見問題與解答

Q1：為什麼我的網頁載入很慢？

可能原因：
- HTML/CSS 檔案過大，解析時間長。
- JavaScript 阻塞了 DOM 解析。
- 過多的 Reflow/Repaint。
解決方法：
- 壓縮 HTML/CSS/JavaScript 檔案。
- 使用 async 或 defer 載入非關鍵 JavaScript。
- 減少不必要的 DOM 操作和複雜 CSS。

Q2：如何檢查渲染性能？

你可以使用瀏覽器的開發者工具（DevTools）來分析渲染性能：
1. 開啟 Chrome DevTools（按 F12）。
2. 切換到「Performance」標籤。
3. 點擊「錄製」按鈕，操作網頁後停止錄製。
4. 查看時間軸，檢查 DOM 解析、Reflow 和 Repaint 的耗時。

Q3：不同渲染引擎有什麼差異？

雖然 Blink、Gecko 和 WebKit 的核心功能相似，但它們在 CSS 支援、性能優化和 JavaScript 引擎（如 V8、SpiderMonkey）上有所不同。
例如，Blink 對新 CSS 屬性（如 CSS Grid）的支援通常較快，而 Gecko 在某些動畫性能上可能更穩定。
建議：使用標準化的 HTML/CSS/JavaScript，確保跨瀏覽器相容性。

實作練習：簡單的動畫元件

為了讓你更熟悉渲染引擎的應用，我提供一個簡單的 JavaScript 和 CSS 範例，實現一個平滑移動的方塊動畫，並避免觸發 Reflow。

步驟：

建立一個 HTML 檔案，包含一個方塊元件。
使用 CSS transform 實現動畫。
使用 JavaScript 控制動畫觸發。

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="UTF-8" />
    <title>動畫方塊</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: transform 0.3s ease;
        will-change: transform; /* 提前提升到獨立圖層 */
      }
      .box.moved {
        transform: translateX(200px); /* 移動 200px */
      }
    </style>
  </head>
  <body>
    <button onclick="moveBox()">移動方塊</button>
    <div class="box"></div>

    <script>
      function moveBox() {
        const box = document.querySelector(".box");
        box.classList.toggle("moved"); // 切換 moved 類別，觸發動畫
      }
    </script>
  </body>
</html>

操作說明：

儲存以上程式碼為 index.html。
在瀏覽器中開啟，點擊「移動方塊」按鈕，方塊會平滑移動 200px。
這段程式碼使用 transform，只觸發合成（Compositing），不會觸發 Reflow 或 Repaint，性能較佳。

總結

瀏覽器的渲染引擎是網頁顯示的核心，負責將 HTML、CSS 和 JavaScript 轉換為視覺化的頁面。理解渲染流程（DOM 解析、CSSOM 建構、渲染樹、佈局、繪製、合成）有助於你優化網頁性能。作為前端工程師，你可以通過減少 DOM 操作、優化 CSS、使用異步 JavaScript 和管理圖層來提升渲染效率。

瀏覽器渲染引擎的工作流程​

1. 解析 HTML 並建構 DOM 樹​

2. 解析 CSS 並建構 CSSOM 樹​

3. 建構渲染樹（Render Tree）​

4. 佈局（Layout 或 Reflow）​

5. 繪製（Painting）​

6. 合成（Compositing，視情況而定）​

如何優化渲染性能（給前端工程師的建議）​

1. 減少 DOM 操作​

2. 優化 CSS​

3. 異步載入 JavaScript​

4. 圖層管理​

常見問題與解答​

Q1：為什麼我的網頁載入很慢？​

Q2：如何檢查渲染性能？​

Q3：不同渲染引擎有什麼差異？​

實作練習：簡單的動畫元件​

步驟：​

操作說明：​

總結​