虛擬DOM和diff演算法

虛擬dom（virtual dom），也就是我們常說的虛擬節點，它是通過js的object物件模擬dom中的節點，然後再通過特定的render方法將其渲染成真實的dom的節點。

為什麼要使用虛擬dom呢，因為操作真實dom的耗費的效能代價太高，頻繁的操作dom，會大量的造成頁面的重繪和回流，出於效能優化的考慮，我們應該減少重繪和回流的操作。對虛擬節點的dom操作，並不會觸發重繪和回流，把處理後的虛擬節點對映到真實dom上，只觸發一次重繪和回流。

我們都知道vue是基於資料驅動的，資料變化之後，不會像jquery那樣進行頁面全部節點的渲染，而是進行區域性節點的渲染。

那如何判斷哪個節點變化呢，利用的就是虛擬dom和真實dom的對比，而對比的方法就是diff演算法。

為了實現虛擬dom，我們需要通過js把每種dom抽象成物件，每一種節點型別有自己的屬性，也就是prop，每次進行diff的時候，先比較該節點型別，假如節點型別不一樣，就直接刪除該節點，然後直接建立新的節點插入到其中，假如節點型別一樣，那麼會比較prop是否有更新，假如有prop不一樣，那麼就判定該節點有更新，重新渲染該節點，然後在對其子節點進行比較，一層一層往下，直到沒有子節點。

// 建立虛擬節點

var temp = document.
createdocumentfragment()
;for
(var i=
0; i<
100; i++
)// 真實節點的操作
ul1.
(temp)
;

虛擬DOM和Diff演算法

虛擬dom其實就是在真實dom之前加了一層js物件生成的dom 用js物件模擬dom 把這個虛擬dom物件轉為真實的dom插入到頁面中 如果有事件修改了虛擬dom，比較兩個虛擬dom樹的差異，得到差異物件 補丁 把差異物件應用到正則的dom樹上 比較同級的節點 同一父節點的子節點 當發現節點已經不存...

虛擬DOM和 Diff演算法

1 用js來模擬dom中的節點。傳說中的虛擬dom。虛擬dom實現過程 1.根據真實dom產生虛擬dom?虛擬dom?就是乙個特殊物件 經過一些處理能產生真實dom 2.進行編譯解析 3.將虛擬dom 變成真實dom 也就 掛載 4.資料發生變化 產生新的虛擬dom 5 將資料變化後的虛擬dom 和...

React 虛擬 Dom 和 diff 演算法

react將dom抽象為虛擬dom,然後通過新舊虛擬dom 這兩個物件的差異 diff演算法 最終只把變化的部分重新渲染,提高渲染效率的過程 概念講完再描述一遍 一句話 用 js 物件的形式,來表現一棵真是的 dom 樹 傳統的 diff 演算法也是一直都有的 react 通過制定大膽的策略，將 o...