反應(yīng)和 Vue.js使用虛擬 DOM 來(lái)優(yōu)化性能。那么影子多姆是什么呢？
如果你使用 React 或 Vue，你可能熟悉虛擬 DOM(文檔對(duì)象模型)。這不應(yīng)與影子 DOM 混淆。
在查看虛擬 DOM 和影子 DOM 之前，您應(yīng)該清楚地了解文檔對(duì)象模型。
為此，通俗地說(shuō)，我們會(huì)說(shuō)
DOM 表示您網(wǎng)站的結(jié)構(gòu)。
如果您想了解有關(guān) DOM 的創(chuàng)建位置以及 HTML、DOM 和 JavaScript 之間的關(guān)系的更多信息，請(qǐng)考慮閱讀什么是 DOM？
現(xiàn)在我們對(duì) DOM 有了一些了解，讓我們看看什么是虛擬 DOM。
什么是虛擬 DOM？
簡(jiǎn)而言之，虛擬 DOM (VDOM) 是一個(gè)編程概念，其中 UI 的理想或“虛擬”表示形式保存在內(nèi)存中，并通過(guò)庫(kù)(如 reactDOM by reactjs.org)與“真實(shí)”DOM 同步。
換句話說(shuō)，React 構(gòu)建了一個(gè)邏輯樹(shù)，用于表示引擎蓋下的實(shí)際 DOM 結(jié)構(gòu)。
為什么我們需要虛擬 DOM？
虛擬DOM是解決現(xiàn)代網(wǎng)絡(luò)中常見(jiàn)問(wèn)題的一種方法。
雖然應(yīng)用程序變得越來(lái)越大，但框架和庫(kù)往往會(huì)過(guò)于頻繁地操作和更新 DOM。這在很多方面可能很昂貴。
導(dǎo)航 DOM 會(huì)變慢，需要更多的處理能力，最終影響應(yīng)用程序的性能。
例如，它會(huì)使頁(yè)面變慢。
有幾種方法可以解決此問(wèn)題：
React 使用虛擬 DOM，并通過(guò)對(duì)賬過(guò)程將其同步到真實(shí)的 DOM。
Angular使用更改檢測(cè)機(jī)制“來(lái)查看您的應(yīng)用程序狀態(tài)是否已更改以及是否需要更新任何DOM”。
維尤還使用虛擬 DOM。通過(guò)使用一些差異算法，Vue 避免了在新更改后重新渲染整個(gè) DOM。
簡(jiǎn)而言之，讓我們記住，虛擬 DOM 是真實(shí) DOM 的副本。
通過(guò)告訴 React 我們想要實(shí)現(xiàn)的最終 DOM 狀態(tài)(UI 的外觀)，React 確保 DOM 與該狀態(tài)匹配。
什么是暗影多姆？
Shadow DOM是一種專為封裝而設(shè)計(jì)的瀏覽器技術(shù)，例如，保持標(biāo)記結(jié)構(gòu)，樣式和行為的隱藏，并與頁(yè)面上的其他代碼分開(kāi)，以便不同的部分不會(huì)發(fā)生沖突，MDN。
封裝會(huì)屏蔽某些代碼，使其不會(huì)與頁(yè)面上的其他代碼沖突。
換句話說(shuō)，由于影子DOM，我們可以將其他元素附加到真正的DOM，知道新元素不會(huì)與真正的DOM本身沖突。
MDN提出的一個(gè)例子是標(biāo)簽。雖然您只能在 DOM 中看到 標(biāo)記，但此元素在其影子 DOM 中包含一系列按鈕和其他控件。
虛擬 DOM 和影子 DOM 之間的差異
關(guān)于虛擬 DOM 和影子 DOM 之間的區(qū)別，我們能說(shuō)些什么呢?這有點(diǎn)像 Java 和 Java 腳本之間的差異！
盡管提到了 DOM，但虛擬 DOM 和影子 DOM 是不同的技術(shù)。
虛擬 DOM 被 React 和 Vue 等庫(kù)用來(lái)解決在保持最佳性能的同時(shí)更改 DOM 的問(wèn)題。
虛擬 DOM 是整個(gè)真實(shí) DOM 的副本，并在瀏覽器 API 之上實(shí)現(xiàn)。
影子 DOM 是 Web 組件和瀏覽器 API 中固有的。因此，它也可以在使用 React 和 Vue 等庫(kù)或 Angular 等框架時(shí)使用。
影子 DOM 是一塊 DOM，在其自己的 Web 組件中被“屏蔽”。
相反，如果您要使用普通 JavaScript 創(chuàng)建應(yīng)用程序，則不會(huì)使用虛擬 DOM。
京公網(wǎng)安備 11010802030320號(hào)