譯者：@前端zenblo 譯文：https://github.com/xitu/gold-miner/blob/master/article/2020/incremental-vs-virtual-dom.md 作者：@Chameera Dulanga 原文：https://blog.bitsrc.io/incremental-vs-virtual-dom-eb7157e43dca
如果你熟悉 React，你大概聽說過虛擬 DOM 的概念。React 受歡迎的主要原因之一就是通過虛擬 DOM 提高用戶界面性能。
然而，當 Angular 在 2019 年發佈他們新的渲染器 Angular Ivy 時，很多人想知道爲什麼他們選擇了增量 DOM 而不用虛擬 DOM。儘管如此，Angular 還是堅持這個想法。所以你可能會想，爲什麼 Angular 一開始就使用增量 DOM，並且還在繼續使用。請跟隨本文一探究竟。
首先，讓我們從虛擬 DOM 開始，瞭解它是如何工作的。
虛擬 DOM 的工作方式
虛擬 DOM 的主要概念是在內存中保留 UI 的虛擬表示，並使用協調（reconciliation）過程將其與真實 DOM 同步。該過程包括三個主要步驟：
當用戶 UI 發生變化時，將整個用戶 UI 渲染到虛擬 DOM 中。
計算之前虛擬 DOM 和當前虛擬 DOM 表示形式之間的差異。
根據變化差異更新真實 DOM。
現在你已經對虛擬 DOM 有了一個基本的瞭解，接下來讓我們來深入瞭解一下增量 DOM。
增量 DOM 的工作方式
增量 DOM 通過使用真實 DOM 來定位代碼更改，帶來了一種比虛擬 DOM 更簡單的方法。因此，內存中不會有任何真實 DOM 的虛擬表示來計算差異，真實 DOM 僅用於與新 DOM 樹進行差異比較。
增量 DOM 概念背後的主要思想是將每個組件編譯成一組指令。然後，這些指令用於創建 DOM 樹並對其進行更改。
增量 DOM 如此特別的原因
看完上面的解釋後，你一定已經得出結論，認爲增量 DOM 要簡單得多。這還不是全部。
增量 DOM 的真正優點是它優化了內存的使用。
當涉及到手機這類低內存容量的設備時，這種優化變得非常有用。而且，優化內存使用不是一件容易的事情。此外，應用程序的內存使用完全取決於包的大小和內存使用。
讓我們看看增量 DOM 是如何幫助我們減少包的大小以及降低內存使用的。
1. 增量 DOM 擁有 Tree Shaking 特性
Tree Shaking 不是什麼新事物，它是指在編譯目標代碼時移除上下文中未引用代碼的過程。
增量 DOM 充分利用了這一點，因爲它使用了基於指令的方法。如前所述，增量 DOM 在編譯之前將每個組件編譯成一組指令，這有助於識別未使用的指令。因此，它們可以在編譯時進行刪除操作。
虛擬 DOM 不能夠 Tree Shaking，因爲它使用解釋器，並且沒有辦法在編譯時識別未使用的代碼。
2. 減少內存使用
如果你明白虛擬 DOM 和增量 DOM 的主要區別，你就應該已經知道這背後的祕密了。
與虛擬 DOM 不同，增量 DOM 在重新呈現應用程序 UI 時不會生成真實 DOM 的副本。此外，如果應用程序 UI 沒有變化，增量 DOM 就不會分配任何內存。大多數情況下，我們都是在沒有任何重大修改的情況下重新呈現應用程序 UI。因此，按照這種方法可以極大地節省設備的內存使用。
增量 DOM 似乎有一個減少虛擬 DOM 內存佔用的解決方案。但是你可能想知道爲什麼其他框架不使用它？
這裏存在一個權衡
雖然增量 DOM 通過按照更有效的方法來計算差異，從而減少了內存使用，但是該方法比虛擬 DOM 更耗時。
因此，在選擇使用增量 DOM 和虛擬 DOM 時，會對運行速度和內存使用之間進行權衡。
最終思考
在這兩種文檔對象模型（DOM）中，虛擬 DOM 長期以來一直處於領先地位。可以說“虛擬 DOM 之所以流行是因爲 React 流行”，另一方面 React 主要得益於這個虛擬 DOM 的特性。
因此，很明顯虛擬 DOM 提供的速度和性能提升有助於 React 與其它框架競爭。
虛擬 DOM 的優缺點
讓我們看一下虛擬 DOM 的一些主要優點：
高效的 diff 算法。
簡單且有助於提升性能。
沒有 React 也能使用。
輕量。
允許構建應用程序且不考慮狀態轉換。
雖然虛擬 DOM 快速高效，但有一個缺點：
這個區分過程（diffing process）確實減少了真實 DOM 的工作量。但它需要將當前的虛擬 DOM 狀態與之前的狀態進行比較，以識別變化。爲了更好地理解這一點，讓我們舉一個小的 React 代碼示例：
function WelcomeMessage(props) {
return(
<div className="welcome">
Welcome{props.name}
</div>
);
}
假設 props.name 的初始值是 Chameera ，後來改成了 Reader。整個代碼中唯一的變化就是 props，不需要改變 DOM 節點或者比較 <div> 標籤內部的屬性。然而，使用 diff 算法，有必要檢查所有步驟來識別變化。
我們在開發過程中可以看到大量這樣的微小變化，比較用戶 UI 中的每個元素無疑是一種開銷。這可以被認爲是虛擬 DOM 的主要缺點之一。
然而，增量 DOM 爲這個大量內存使用問題提供了一個解決方案。
增量 DOM 的優缺點
正如我前面提到的，增量 DOM 通過使用真實 DOM 跟蹤變化，提供了一個減少虛擬 DOM 內存消耗的解決方案。這種方法大大降低了計算開銷，也優化了應用程序的內存使用。
所以，這是使用增量 DOM 相對於虛擬 DOM 的主要優勢，我們可以列出增量 DOM 的其他優點：
易於與許多其他框架結合使用。
簡單的 API 使其成爲強大的目標模板引擎。
適合基於移動設備的應用程序。
在大多數情況下，增量 DOM 不如虛擬 DOM 運行快。
雖然增量 DOM 帶來了減少內存使用的解決方案，但是該解決方案影響了增量 DOM 的速度，因爲增量 DOM 的差異計算比虛擬 DOM 方法耗費更多時間。因此，我們可以認爲這是使用增量 DOM 的主要缺點。
這兩種 DOM 各有特色，我們不能只說虛擬 DOM 更好，或者增量 DOM 更好。然而，我可以肯定地說，虛擬 DOM 和增量 DOM 都是很好的選項，它們可以毫無問題地處理動態 DOM 更新。
回覆“加羣”與大佬們一起交流學習~
點擊“閱讀原文”查看 100+ 篇原創文章
本文分享自微信公衆號 - 前端自習課（FE-study）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。