【W(wǎng)eb技術】858- 增量 DOM 與虛擬 DOM 的對比使用

譯者：@前端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 年發(fā)布他們新的渲染器 Angular Ivy 時，很多人想知道為什么他們選擇了增量 DOM 而不用虛擬 DOM。盡管如此，Angular 還是堅持這個想法。所以你可能會想，為什么 Angular 一開始就使用增量 DOM，并且還在繼續(xù)使用。請跟隨本文一探究竟。

首先，讓我們從虛擬 DOM 開始，了解它是如何工作的。

虛擬 DOM 的工作方式

虛擬 DOM 的主要概念是在內存中保留 UI 的虛擬表示，并使用協(xié)調（reconciliation）過程將其與真實 DOM 同步。該過程包括三個主要步驟：

• 當用戶 UI 發(fā)生變化時，將整個用戶 UI 渲染到虛擬 DOM 中。

• 計算之前虛擬 DOM 和當前虛擬 DOM 表示形式之間的差異。

• 根據(jù)變化差異更新真實 DOM。

現(xiàn)在你已經(jīng)對虛擬 DOM 有了一個基本的了解，接下來讓我們來深入了解一下增量 DOM。

增量 DOM 的工作方式

增量 DOM 通過使用真實 DOM 來定位代碼更改，帶來了一種比虛擬 DOM 更簡單的方法。因此，內存中不會有任何真實 DOM 的虛擬表示來計算差異，真實 DOM 僅用于與新 DOM 樹進行差異比較。

增量 DOM 概念背后的主要思想是將每個組件編譯成一組指令。然后，這些指令用于創(chuàng)建 DOM 樹并對其進行更改。

增量 DOM 如此特別的原因

看完上面的解釋后，你一定已經(jīng)得出結論，認為增量 DOM 要簡單得多。這還不是全部。

增量 DOM 的真正優(yōu)點是它優(yōu)化了內存的使用。

當涉及到手機這類低內存容量的設備時，這種優(yōu)化變得非常有用。而且，優(yōu)化內存使用不是一件容易的事情。此外，應用程序的內存使用完全取決于包的大小和內存使用。

讓我們看看增量 DOM 是如何幫助我們減少包的大小以及降低內存使用的。

1. 增量 DOM 擁有 Tree Shaking 特性

Tree Shaking 不是什么新事物，它是指在編譯目標代碼時移除上下文中未引用代碼的過程。

增量 DOM 充分利用了這一點，因為它使用了基于指令的方法。如前所述，增量 DOM 在編譯之前將每個組件編譯成一組指令，這有助于識別未使用的指令。因此，它們可以在編譯時進行刪除操作。

虛擬 DOM 不能夠 Tree Shaking，因為它使用解釋器，并且沒有辦法在編譯時識別未使用的代碼。

2. 減少內存使用

如果你明白虛擬 DOM 和增量 DOM 的主要區(qū)別，你就應該已經(jīng)知道這背后的秘密了。

與虛擬 DOM 不同，增量 DOM 在重新呈現(xiàn)應用程序 UI 時不會生成真實 DOM 的副本。此外，如果應用程序 UI 沒有變化，增量 DOM 就不會分配任何內存。大多數(shù)情況下，我們都是在沒有任何重大修改的情況下重新呈現(xiàn)應用程序 UI。因此，按照這種方法可以極大地節(jié)省設備的內存使用。

增量 DOM 似乎有一個減少虛擬 DOM 內存占用的解決方案。但是你可能想知道為什么其他框架不使用它？

這里存在一個權衡

雖然增量 DOM 通過按照更有效的方法來計算差異，從而減少了內存使用，但是該方法比虛擬 DOM 更耗時。

因此，在選擇使用增量 DOM 和虛擬 DOM 時，會對運行速度和內存使用之間進行權衡。

最終思考

在這兩種文檔對象模型（DOM）中，虛擬 DOM 長期以來一直處于領先地位。可以說“虛擬 DOM 之所以流行是因為 React 流行”，另一方面 React 主要得益于這個虛擬 DOM 的特性。

因此，很明顯虛擬 DOM 提供的速度和性能提升有助于 React 與其它框架競爭。

虛擬 DOM 的優(yōu)缺點

讓我們看一下虛擬 DOM 的一些主要優(yōu)點：

• 高效的 diff 算法。

• 簡單且有助于提升性能。

• 沒有 React 也能使用。

• 輕量。

• 允許構建應用程序且不考慮狀態(tài)轉換。

雖然虛擬 DOM 快速高效，但有一個缺點：

這個區(qū)分過程（diffing process）確實減少了真實 DOM 的工作量。但它需要將當前的虛擬 DOM 狀態(tài)與之前的狀態(tài)進行比較，以識別變化。為了更好地理解這一點，讓我們舉一個小的 React 代碼示例：

function WelcomeMessage(props) {
return(
"welcome">
Welcome{props.name}