反應(yīng)和 Vue.js使用虛擬 DOM 來優(yōu)化性能。那么影子多姆是什么呢？

　　如果你使用 React 或 Vue，你可能熟悉虛擬 DOM(文檔對象模型)。這不應(yīng)與影子 DOM 混淆。

　　在查看虛擬 DOM 和影子 DOM 之前，您應(yīng)該清楚地了解文檔對象模型。

　　為此，通俗地說，我們會(huì)說

　　DOM 表示您網(wǎng)站的結(jié)構(gòu)。

　　如果您想了解有關(guān) DOM 的創(chuàng)建位置以及 HTML、DOM 和 JavaScript 之間的關(guān)系的更多信息，請考慮閱讀什么是 DOM？

　　現(xiàn)在我們對 DOM 有了一些了解，讓我們看看什么是虛擬 DOM。

　　什么是虛擬 DOM？

　　簡而言之，虛擬 DOM (VDOM) 是一個(gè)編程概念，其中 UI 的理想或“虛擬”表示形式保存在內(nèi)存中，并通過庫(如 reactDOM by reactjs.org)與“真實(shí)”DOM 同步。

　　換句話說，React 構(gòu)建了一個(gè)邏輯樹，用于表示引擎蓋下的實(shí)際 DOM 結(jié)構(gòu)。

　　為什么我們需要虛擬 DOM？

　　虛擬DOM是解決現(xiàn)代網(wǎng)絡(luò)中常見問題的一種方法。

　　雖然應(yīng)用程序變得越來越大，但框架和庫往往會(huì)過于頻繁地操作和更新 DOM。這在很多方面可能很昂貴。

　　導(dǎo)航 DOM 會(huì)變慢，需要更多的處理能力，最終影響應(yīng)用程序的性能。

　　例如，它會(huì)使頁面變慢。

　　有幾種方法可以解決此問題：

　　React 使用虛擬 DOM，并通過對賬過程將其同步到真實(shí)的 DOM。

　　Angular使用更改檢測機(jī)制“來查看您的應(yīng)用程序狀態(tài)是否已更改以及是否需要更新任何DOM”。

　　維尤還使用虛擬 DOM。通過使用一些差異算法，Vue 避免了在新更改后重新渲染整個(gè) DOM。

　　簡而言之，讓我們記住，虛擬 DOM 是真實(shí) DOM 的副本。

　　通過告訴 React 我們想要實(shí)現(xiàn)的最終 DOM 狀態(tài)(UI 的外觀)，React 確保 DOM 與該狀態(tài)匹配。

　　什么是暗影多姆？

　　Shadow DOM是一種專為封裝而設(shè)計(jì)的瀏覽器技術(shù)，例如，保持標(biāo)記結(jié)構(gòu)，樣式和行為的隱藏，并與頁面上的其他代碼分開，以便不同的部分不會(huì)發(fā)生沖突，MDN。

　　封裝會(huì)屏蔽某些代碼，使其不會(huì)與頁面上的其他代碼沖突。

　　換句話說，由于影子DOM，我們可以將其他元素附加到真正的DOM，知道新元素不會(huì)與真正的DOM本身沖突。

　　MDN提出的一個(gè)例子是標(biāo)簽。雖然您只能在 DOM 中看到 標(biāo)記，但此元素在其影子 DOM 中包含一系列按鈕和其他控件。

　　虛擬 DOM 和影子 DOM 之間的差異

　　關(guān)于虛擬 DOM 和影子 DOM 之間的區(qū)別，我們能說些什么呢?這有點(diǎn)像 Java 和 Java 腳本之間的差異！

　　盡管提到了 DOM，但虛擬 DOM 和影子 DOM 是不同的技術(shù)。

　　虛擬 DOM 被 React 和 Vue 等庫用來解決在保持最佳性能的同時(shí)更改 DOM 的問題。

　　虛擬 DOM 是整個(gè)真實(shí) DOM 的副本，并在瀏覽器 API 之上實(shí)現(xiàn)。

　　影子 DOM 是 Web 組件和瀏覽器 API 中固有的。因此，它也可以在使用 React 和 Vue 等庫或 Angular 等框架時(shí)使用。

　　影子 DOM 是一塊 DOM，在其自己的 Web 組件中被“屏蔽”。

　　相反，如果您要使用普通 JavaScript 創(chuàng)建應(yīng)用程序，則不會(huì)使用虛擬 DOM。