【轉載】什麼是 Virtual DOM?從底層原理到 React 的渲染策略
出處:https://hackmd.io/xejlCpUsQaibO90CYB5CJg
為什麼要談 Virtual DOM?
每當我們在網頁上看到動態更新的內容,背後都可能涉及了對 DOM (文件物件模型) 的操作。然而,DOM 與瀏覽器的渲染引擎是緊密耦合的,任何一次看似微小的改動,都可能觸發瀏覽器進行成本高昂的 重排 (Reflow) 與 重繪 (Repaint),頻繁的操作最終會成為應用的效能瓶頸。
為了在提供豐富互動的同時,又能維持流暢的體驗,前端框架必須找到一個方法來「最小化對真實 DOM 的操作」。而 Virtual DOM,正是為此而生的一種優雅策略。
DOM 是什麼?為什麼慢?
很間單的先用一句話說明是:瀏覽器呈現 UI 的載體。但在我整理資料之後我覺得可以用更精細的說明:
- 網頁瀏覽器內部的 HTML 解析器(parsing)會將原始的 HTML/XML 文本解析並轉換為一個樹狀的資料結構,這就是 Document Object Model (DOM)。
- DOM 的每個節點都代表文件中的一部分,並以 JavaScript 物件的形式存在,提供了一系列屬性與方法 (DOM API)。
- JavaScript 正是透過這些 DOM API 來存取、查詢、修改這些節點,從而動態地控制網頁的內容、樣式和行為,實現使用者互動。
麼是 Reflow / Repaint?
- 回流 (Reflow):當 DOM 元素的幾何屬性(如寬度、高度、位置)發生改變,導致瀏覽器需要重新計算元素在頁面上的佈局時,就會觸發回流。
- 重繪 (Repaint):當元素的外觀屬性(如顏色、背景)發生改變,但不影響其佈局時,瀏覽器只需重新繪製該部分的外觀,這個過程稱為重繪。
- 回流必定會觸發重繪,但重繪不一定會觸發回流。因此,回流對效能的影響遠大於重繪。
每次 DOM 變化都可能觸發效能瓶頸
瀏覽器在操作 DOM 的過程中都有可能引發 Reflow 或 Repaint,過程中是仰賴 瀏覽器CPU 需要重新計算,在反覆的過程中是可能引起效能瓶頸的。
其餘內容請看原站~~