virtual DOM是如何優化性能的

談到virtual DOM 前先來講說瀏覽器渲染的流程

瀏覽器接收到html文件，並轉換成DOM樹。若是有css還會生成css樹。若是遇到script標籤，會先判斷是async或defer。若是是前者會並行下載並執行js，後者會先下載，等html解析完後順序執行。
當構建後dom樹和css樹後，開始構建render樹。這一步就是肯定頁面佈局和樣式，在生成render樹的過程當中瀏覽器就開始繪製合成圖層將內容顯示在屏幕。
只要dom一更新，以上流程瀏覽器就會再執行一次。

當數據開始變化時，如何手動操做DOM？

回想一下，這樣的場景是否是經常見到。一個列表中有許多條數據，須要提供一個按鈕來控制數據的排序；一個按鈕刪除，一個按鈕新增甚至還有編輯數據。當沒有任何的框架的時候，就須要咱們手動的修改DOM結構。給按鈕增長監聽事件和回調函數更新DOM。功能越複雜，須要增長的事件和維護的代碼就會愈來愈多，項目也會愈來愈臃腫。

virtual DOM是如何操做的
首先有一個數據結構和DOM結構類似的對象，而後用這個對象去渲染真正的DOM樹。當狀態發生改變時，新生成一個對象和原來的對象比較，發現有不一樣的地方，就將改變的地方替換掉相對應的原來的對象的地方。

兩種渲染的比較
爲何經過virtual DOM會提升性能呢？
要知道每一次修改DOM都會觸發瀏覽器的從新渲染的流程。
假設有一個頁面數據龐大，須要修改1000條數據，
直接操做DOM 至關於1000瀏覽器從新渲染
然而使用虛擬DOM是先js層面了計算了1000次，計算好後在訪問一次DOM
在js層面的計算和直接訪問DOM操做相比，簡直便宜得不行。