虛擬dom原理指的是什么

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

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

虛擬dom原理：

1. 為什么需要虛擬DOM

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

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

• 解析html元素，構建dom 樹

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

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

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

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

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

2. Virtual DOM

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

虛擬節(jié)點（vNode）結構

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

虛擬DOM算法流程圖

React Diff算法

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

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

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

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

不同節(jié)點類型的比較

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

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

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

dom樹

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

相同類型節(jié)點的比較

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

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