DOM的缺陷有哪些？
- 牽一發而動全身（頻繁操作DOM）
- 每次操作DOM，渲染引擎都需要進行重排、重繪或者合成等操作
- 對於 DOM 的不當操作還有可能引發強制同步布局和布局抖動的問題
- 大大降低渲染效率
虛擬 DOM 要解決哪些事情？
- 將頁面改變的內容應用到虛擬 DOM 上，而不是直接應用到 DOM 上
- 虛擬 DOM 並不急着去渲染頁面，而僅僅是調整虛擬DOM 的內部狀態
- 在虛擬 DOM 收集到足夠的改變時，再把這些變化一次性應用到真實的 DOM 上。
虛擬DOM執行流程是什么？
創建階段：首先依據 JSX 和基礎數據創建出來虛擬 DOM，它反映了真實的 DOM 樹的結構。然后由虛擬 DOM 樹創建出真實 DOM 樹，真實的 DOM 樹生成完后，再觸發渲染流水線往屏幕輸出頁面。
更新階段：如果數據發生了改變，那么就需要根據新的數據創建一個新的虛擬 DOM樹；然后 React 比較兩個樹，找出變化的地方，並把變化的地方一次性更新到真實的DOM 樹上；最后渲染引擎更新渲染流水線，並生成新的頁面。
虛擬DOM都解決了哪些問題？
- 頻繁更新DOM引起的性能問題
- 將真實DOM和js操作解耦，減少js操作dom復雜性。
虛擬DOM是如何解決這些缺陷的？
當有數據更新時，React 會生成一個新的虛擬 DOM，然后拿新的虛擬 DOM和之前的虛擬 DOM 進行比較（比較兩個虛擬 DOM 的過程是在一個遞歸函數里執行的，其核心算法是 reconciliation），這個過程會找出變化的節點，然后再將變化的節點應用到DOM 上。通常情況下，這個比較過程執行得很快，不過當虛擬 DOM 比較復雜的時候，執行比較函數就有可能占據主線程比較久的時間，這樣就會導致其他任務的等待，造成頁面卡頓，這時，React 團隊重寫了reconciliation 算法，新的算法稱為 Fiber reconciler，就是在執行算法的過程中出讓主線程，這樣就解決了 Stack reconciler 函數占用時間過久的問題。
虛擬DOM從雙緩存和 MVC 角度又是怎樣的？
雙緩存是一種經典的思路，應用在很多場合，能解決頁面無效刷新和閃屏的問題，虛擬 DOM 就是雙緩存思想的一種體現。而基於 MVC 的設計思想也廣泛地滲透到各種場合，並且基於 MVC 又衍生出了很多其他模式（如 MVP、MVVM 等），不過萬變不離其宗，它們的基礎骨架都是基於 MVC 而來，例如React，可以把它的虛擬DOM看成是MVC的視圖部分，其控制器和模型都是由Redux 提供的。具體實現過程：
基於React、Redux構建的MVC模型：
-
控制器是用來監控 DOM 的變化，一旦 DOM 發生變化，控制器便會通知模型，讓其更新數據
-
模型數據更新好之后，控制器會通知視圖，告訴它模型的數據發生了變化；
-
視圖接收到更新消息之后，會根據模型所提供的數據來生成新的虛擬 DOM；
-
新的虛擬 DOM 生成好之后，就需要與之前的虛擬 DOM 進行比較，找出變化的節點；
-
比較出變化的節點之后，React 將變化的虛擬節點應用到 DOM 上，這樣就會觸發 DOM節點的更新；
-
DOM 節點的變化又會觸發后續一系列渲染流水線的變化，從而實現頁面的更新。