什麼是虛擬DOM

虛擬DOM就是用JS來模擬DOM結構。

爲何要虛擬DOM？

　　當用傳統的api或jQuery去操做DOM時，瀏覽器會從構建DOM樹開始從頭至尾執行一遍流程。好比當你在一次操做時，須要更新10個DOM節點，理想狀態是一次性構建完成DOM樹，再執行後續操做。可是瀏覽器沒有那麼智能，在收到第一個更新DOM請求後，並不知道後續還有9次更新操做，所以會立刻執行流程，最終執行10次流程，顯然前面幾回都是白白浪費性能。並且操做DOM的代價是很昂貴的，頻繁操做可能會出現頁面卡頓，影響用戶的體驗。

　　虛擬DOM就是爲了解決這個瀏覽器性能問題而被設計出來的，若是一次操做中有10次更新DOM的操做，虛擬DOM不會當即操做DOM，而是將這10次更新的diff內容保存在本地的一個js對象中，最終將這個js對象一次性attach到DOM樹上，通知瀏覽器去執行繪製工做，這樣能夠避免大量的無謂的計算量。

 

虛擬DOM與真實DOM的區別？

一、虛擬DOM不會進行重排與重繪操做；

二、虛擬DOM進行頻繁修改，而後一次性比較並修改真實DOM中須要修改的部分，最後進行重排和重繪，減小過多DOM節點重排和重繪損耗。

三、虛擬DOM有效下降大面積（真實DOM節點）的重排和重繪，由於最終與真實DOM比較差別，能夠局部渲染。