虛擬dom原理指的是什么

這篇文章給大家分享的是有關虛擬dom原理指的是什么的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

虛擬dom原理： 當用原生js或jquery等庫去操作DOM時，瀏覽器會從構建DOM樹開始講整個流程執行一遍，所以頻繁操作DOM會引起不需要的計算，導致頁面卡頓，影響用戶體驗，而Virtual DOM能很好的解決這個問題。

虛擬dom原理：

1. 為什么需要虛擬DOM

先介紹瀏覽器加載一個網頁需要經歷那些過程；我們只討論頁面解析流程，不考慮網絡請求過程。

瀏覽器內核拿到html文件后，大致分為一下5個步驟：

• 解析html元素，構建dom 樹

• 解析CSS，生成頁面css規則樹（Style Rules）

• 將dom樹 和 css規則樹關聯起來，生成render樹
  

• 布局（layout/ reflow），瀏覽器會為Render樹上的每個節點確定在屏幕上的尺寸、位置
  

• 繪制Render樹，繪制頁面像素信息到屏幕上，這個過程叫paint
  

當你用原生js 或jquery等庫去操作DOM時，瀏覽器會從構建DOM樹開始講整個流程執行一遍，所以頻繁操作DOM會引起不需要的計算，導致頁面卡頓，影響用戶體驗。而Virtual DOM能很好的解決這個問題。它用javascript對象表示virtual node(VNode)，根據VNode 計算出真實DOM需要做的最小變動，然后再操作真實DOM節點，提高渲染效率。

2. Virtual DOM

虛擬DOM用javascript對象來表示VNode，VNode的結構如下：

虛擬節點（vNode）結構

下面是虛擬DOM的算法流程圖：

虛擬DOM算法流程圖

React Diff算法

高效的diff算法能夠保證進行對實際的DOM進行最小的變動。但是標準的的 Diff 算法復雜度需要 O(n^3)，這顯然無法滿足性能要求。要達到每次界面都可以整體刷新界面的目的，勢必需要對算法進行優化。React里結合 Web 界面的特點做出了兩個簡單的假設，使得 Diff 算法復雜度直接降低到 O(n)。

1. 兩個相同組件產生類似的 DOM 結構，不同的組件產生不同的 DOM 結構；

2. 對于同一層次的一組子節點，它們可以通過唯一的 id 進行區分。

算法上的優化是 React 整個界面 Render 的基礎，保證了整體界面渲染的性能。

不同節點類型的比較

為了在樹之間進行比較，我們首先要能夠比較兩個節點，在 React 中即比較兩個虛擬 DOM 節點，當兩個節點不同時，應該如何處理。這分為兩種情況：（1）節點類型不同 ，（2）節點類型相同，但是屬性不同。

節點類型不同：直接刪除原節點， 插入新節點。

React 的 DOM Diff 算法實際上只會對樹進行逐層比較，兩棵樹只會對同一層次的節點進行比較如下所述。

dom樹

React 只會對相同顏色方框內的 DOM 節點進行比較，即同一個父節點下的所有子節點。當發現節點已經不存在，則該節點及其子節點會被完全刪除掉，不會用于進一步的比較。這樣只需要對樹進行一次遍歷，便能完成整個 DOM 樹的比較。

相同類型節點的比較

React 會對屬性進行重設從而實現節點的轉換。

感謝各位的閱讀！關于“虛擬dom原理指的是什么”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！