虛擬DOM

傳統的 DOM 操做是直接在 DOM 上操做，當須要修改一系列元素中的值時，就會直接對 DOM 進行操做。若是須要操做的DOM元素過多，則成本過高，而採用 Virtual DOM 則會對須要修改的 DOM 進行比較（DIFF），從而只選擇須要修改的部分。

引入虛擬DOM優缺點：

• 尺寸

更多的功能意味着更多的代碼。

• 內存

虛擬DOM須要在內存中的維護一份DOM的副本。在DOM更新速度和使用內存空間之間取得平衡。

• 不是適合全部狀況

若是虛擬DOM大量更改，這是合適的。可是單一的，頻繁的更新的話，虛擬DOM將會花費更多的時間處理計算的工做。因此，若是你有一個DOM節點相對較少頁面，用虛擬DOM，它實際上有可能會更慢。但對於大多數單頁面應用，這應該都會更快

 

react虛擬dom：

依據diff算法，React把js和html混寫在一塊兒來

前端：更新狀態、更新視圖；因此前端頁面的性能問題主要是由Dom操做引發的。由於Dom渲染慢，而JS解析編譯相對很是很是很是快！js更容易表示節點

<ul id='app'>

<li>app1</li>

<li>app2</li>

</ul>

var domNode = {

tag: 'ul'

attributes: {

id: 'myId'

}

children: [ //這裏是 li ]

};

只操做JavaScript對象

 

diff算法是虛擬dom核心：

傳統的diff算法複雜度是次方級別增加，而react用的優化過的diff算法：

過程：1.節點比較（屬性、文本）；2.記錄差異（編號）；3.增刪改查（js）；

優化點：

1：老的父節點和新的父節點只要不同，ok，斷臂！即便孩子節點如出一轍，都要刪除，渲染新的節點；

2：父節點相同，對比節點的屬性、文本，進行替換或者刪除