跳到主內容

【轉載】什麼是 Virtual DOM?從底層原理到 React 的渲染策略

出處:https://hackmd.io/xejlCpUsQaibO90CYB5CJg

為什麼要談 Virtual DOM?

每當我們在網頁上看到動態更新的內容,背後都可能涉及了對 DOM (文件物件模型) 的操作。然而,DOM 與瀏覽器的渲染引擎是緊密耦合的,任何一次看似微小的改動,都可能觸發瀏覽器進行成本高昂的 重排 (Reflow) 與 重繪 (Repaint),頻繁的操作最終會成為應用的效能瓶頸。

為了在提供豐富互動的同時,又能維持流暢的體驗,前端框架必須找到一個方法來「最小化對真實 DOM 的操作」。而 Virtual DOM,正是為此而生的一種優雅策略。

DOM 是什麼?為什麼慢?

很間單的先用一句話說明是:瀏覽器呈現 UI 的載體。但在我整理資料之後我覺得可以用更精細的說明:

  1. 網頁瀏覽器內部的 HTML 解析器(parsing)會將原始的 HTML/XML 文本解析並轉換為一個樹狀的資料結構,這就是 Document Object Model (DOM)。
  2. DOM 的每個節點都代表文件中的一部分,並以 JavaScript 物件的形式存在,提供了一系列屬性與方法 (DOM API)。
  3. JavaScript 正是透過這些 DOM API 來存取、查詢、修改這些節點,從而動態地控制網頁的內容、樣式和行為,實現使用者互動。

麼是 Reflow / Repaint?

  • 回流 (Reflow):當 DOM 元素的幾何屬性(如寬度、高度、位置)發生改變,導致瀏覽器需要重新計算元素在頁面上的佈局時,就會觸發回流。
  • 重繪 (Repaint):當元素的外觀屬性(如顏色、背景)發生改變,但不影響其佈局時,瀏覽器只需重新繪製該部分的外觀,這個過程稱為重繪。
  • 回流必定會觸發重繪,但重繪不一定會觸發回流。因此,回流對效能的影響遠大於重繪。

每次 DOM 變化都可能觸發效能瓶頸

瀏覽器在操作 DOM 的過程中都有可能引發 Reflow 或 Repaint,過程中是仰賴 瀏覽器CPU 需要重新計算,在反覆的過程中是可能引起效能瓶頸的。

image-1752027656034.png

其餘內容請看原站~~