什么是虛擬DOM，虛擬DOM的優點是什么

1.什么是虛擬DOM

　  虛擬DOM就是用來模擬DOM結構的一個js對象。

2.為什么要用虛擬DOM(優點是什么)

   1.減少對真實DOM的操作

    在react，vue等技術出現之前，我們要改變頁面展示的內容只能通過遍歷查詢 dom 樹的方式找到需要修改的 dom 然后修改樣式行為或者結構，來達到更新視圖的目的。這種方式相當消耗計算資源，因為每次查詢 dom 幾乎都需要遍歷整顆 dom 樹，如果建立一個與 dom 樹對應的虛擬 dom 對象（ js 對象），以對象嵌套的方式來表示 dom 樹，那么每 次 dom 的更改就變成了 js 對象的屬性的更改，這樣一來就能查找 js 對象的屬性變化要比查詢 dom 樹的性能開銷小。

   虛擬dom和真實dom的對比

//真實的dom
<ul id='test'>
	<p class='hehe'>這里是p標簽</p>
</ul>
//對應的虛擬dom對象
let vdom={
    tag:'ul',
    attr:{
    	id:'test'
    },
    content:[
    	{
    		tag:'p',
    		attr:{
    			class:'hehe'
    		},
    		content:'這里是p標簽'
    	}
    ]
}
//將虛擬dom轉為真實dom基本操作：
let ul=document.createElement(vdom.tag);
ul.id=test;
let p=document.createElement(vdom.content.tag);
ul.p.class=hehe;
//再通過append方法添加...等操作

　　dom操作和虛擬dom操作耗時對比：

let num=0
console.time('test')
// 方式一：平均 60ms   80ms
 for (var i = 0; i < 10000; i++) {
let tmp=Number(document.getElementById('test').innerHTML)
document.getElementById('test').innerHTML=tmp+1
 }
 console.timeEnd('test');
 
//方式二： 平均  1ms   0.6ms
//let num=0
//console.time('test')
// for (var i = 0; i < 10000; i++) {
//     num++
// }
// document.getElementById('test').innerHTML=num
// console.timeEnd('test');

新技術如何解決性能問題：

angular，react，vue 等框架的出現就是為了解決這個問題的。

他們的思想是每次更新 dom 都盡量避免刷新整個頁面，而是有針對性的去刷新那被更改的一部分，來釋放掉被無效渲染占用的 gpu，cup 性能。

angular

angular 采用的機制是 臟值檢測查機制 所有使用了 ng 指令的 scope data 和 {{}} 語法的 scope data 都會被加入臟檢測的隊列

vue

vue 采用的是虛擬 dom 通過重寫 setter ， getter 實現觀察者監聽 data 屬性的變化生成新的虛擬 dom 通過 h 函數創建真實 dom 替換掉dom樹上對應的舊 dom。

react

react 也是通過虛擬 dom 和 setState 更改 data 生成新的虛擬 dom 以及 diff 算法來計算和生成需要替換的 dom 做到局部更新的。

2.虛擬 DOM 本質上是 JavaScript 對象，可以跨平台，例如服務器渲染、Weex 開發等。

3.虛擬 DOM 可以維護程序的狀態，通過對比兩次狀態的差異更新真實 DOM。