增量 DOM 與虛擬 DOM 的對(duì)比使用

如果你熟悉 React，你大概聽說過虛擬 DOM 的概念。React 受歡迎的主要原因之一就是通過虛擬 DOM 提高用戶界面性能。

然而，當(dāng) Angular 在 2019 年發(fā)布他們新的渲染器 Angular Ivy 時(shí)，很多人想知道為什么他們選擇了增量 DOM 而不用虛擬 DOM。盡管如此，Angular 還是堅(jiān)持這個(gè)想法。所以你可能會(huì)想，為什么 Angular 一開始就使用增量 DOM，并且還在繼續(xù)使用。請(qǐng)跟隨本文一探究竟。

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

虛擬 DOM 的工作方式

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

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

• 計(jì)算之前虛擬 DOM 和當(dāng)前虛擬 DOM 表示形式之間的差異。

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

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

增量 DOM 的工作方式

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

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

增量 DOM 如此特別的原因

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

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

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

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

1. 增量 DOM 擁有 Tree Shaking 特性

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

增量 DOM 充分利用了這一點(diǎn)，因?yàn)樗褂昧嘶谥噶畹姆椒āＨ缜八觯隽?DOM 在編譯之前將每個(gè)組件編譯成一組指令，這有助于識(shí)別未使用的指令。因此，它們可以在編譯時(shí)進(jìn)行刪除操作。

虛擬 DOM 不能夠 Tree Shaking，因?yàn)樗褂媒忉屍鳎⑶覜]有辦法在編譯時(shí)識(shí)別未使用的代碼。

2. 減少內(nèi)存使用

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

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

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

這里存在一個(gè)權(quán)衡

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

因此，在選擇使用增量 DOM 和虛擬 DOM 時(shí)，會(huì)對(duì)運(yùn)行速度和內(nèi)存使用之間進(jìn)行權(quán)衡。

最終思考

在這兩種文檔對(duì)象模型（DOM）中，虛擬 DOM 長期以來一直處于領(lǐng)先地位。可以說“虛擬 DOM 之所以流行是因?yàn)?React 流行”，另一方面 React 主要得益于這個(gè)虛擬 DOM 的特性。

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

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

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

• 高效的 diff 算法。

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

• 沒有 React 也能使用。

• 輕量。

• 允許構(gòu)建應(yīng)用程序且不考慮狀態(tài)轉(zhuǎn)換。

雖然虛擬 DOM 快速高效，但有一個(gè)缺點(diǎn)：

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

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