Virtual DOM 其實(shí)就是一棵以 JavaScript 對象( VNode 節(jié)點(diǎn))作為基礎(chǔ)的樹，用對象屬性來描述節(jié)點(diǎn)，實(shí)際上它只是一層對真實(shí) DOM 的抽象。最終可以通過一系列操作使這棵樹映射到真實(shí)的DOM上

　　下面就是一個真實(shí)DOM映射到虛擬DOM的例子：

 <ul id='list'>

          <li class='item'>Item 1</li>

          <li class='item'>Item 2</li>

          <li class='item'>Item 3</li>

        </ul>

 var element = {

        tagName: 'ul', // 節(jié)點(diǎn)標(biāo)簽名

        props: { // DOM的屬性，用一個對象存儲鍵值對

            id: 'list'

        },

        children: [ // 該節(jié)點(diǎn)的子節(jié)點(diǎn)

          {tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},

          {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},

          {tagName: 'li', props: {class: 'item'}, children: ["Item 3"]},

        ]

    }

　　在補(bǔ)充點(diǎn)虛擬DOM的好處

　　具備跨平臺的優(yōu)勢

　　由于 Virtual DOM 是以 JavaScript 對象為基礎(chǔ)而不依賴真實(shí)平臺環(huán)境，所以使它具有了跨平臺的能力，比如說瀏覽器平臺、Weex、Node 等。

　　操作原生DOM慢，js運(yùn)行效率高。我們可以將DOM對比操作放在JS層，提高效率。

　　因?yàn)镈OM操作的執(zhí)行速度遠(yuǎn)不如Javascript的運(yùn)算速度快，因此，把大量的DOM操作搬運(yùn)到Javascript中，運(yùn)用patching算法來計算出真正需要更新的節(jié)點(diǎn)，最大限度地減少DOM操作，從而顯著提高性能。

　　Virtual DOM 本質(zhì)上就是在 JS 和 DOM 之間做了一個緩存?？梢灶惐?CPU 和硬盤，既然硬盤這么慢，我們就在它們之間加個緩存：既然 DOM 這么慢，我們就在它們 JS 和 DOM 之間加個緩存。CPU(JS)只操作內(nèi)存(Virtual DOM)，最后的時候再把變更寫入硬盤(DOM)

　　提升渲染性能

　　Virtual DOM的優(yōu)勢不在于單次的操作，而是在大量、頻繁的數(shù)據(jù)更新下，能夠?qū)σ晥D進(jìn)行合理、高效的更新。

　　diff算法

　　vdom因?yàn)槭羌兇獾腏S對象，所以操作它會很高效，但是vdom的變更最終會轉(zhuǎn)換成DOM操作，為了實(shí)現(xiàn)高效的DOM操作，一套高效的虛擬DOM diff算法顯得很有必要

　　diff算法包括一下幾個步驟：

　　用 JavaScript 對象結(jié)構(gòu)表示 DOM 樹的結(jié)構(gòu);然后用這個樹構(gòu)建一個真正的 DOM 樹，插到文

　　檔當(dāng)中

　　當(dāng)狀態(tài)變更的時候，重新構(gòu)造一棵新的對象樹。然后用新的樹和舊的樹進(jìn)行比較(diff)，記錄兩棵樹差異

　　把2所記錄的差異應(yīng)用到步驟1所構(gòu)建的真正的DOM樹上(patch)，視圖就更新了

　　diff算法是通過同層的樹節(jié)點(diǎn)進(jìn)行比較而非對樹進(jìn)行逐層搜索遍歷的方式，所以時間復(fù)雜度只有O(n)，是一種相當(dāng)高效的算法

　　實(shí)現(xiàn)虛擬DOM的過程