虛擬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的區別？
1、虛擬DOM不會進行重排與重繪操作；
2、虛擬DOM進行頻繁修改，然后一次性比較並修改真實DOM中需要修改的部分，最后進行重排和重繪，減少過多DOM節點重排和重繪損耗。
3、虛擬DOM有效降低大面積（真實DOM節點）的重排和重繪，因為最終與真實DOM比較差異，可以局部渲染。