因?yàn)镽eact、Vue框架的出現(xiàn)，頁面渲染采用了更高效的虛擬DOM。
一個(gè)dom元素中有許多屬性，操作dom是很耗資源的，而操作自定義的js對(duì)象是很高效。所以在操作dom之間多加一層“虛擬dom”，建立虛擬dom與dom的關(guān)聯(lián)，把直接操作dom轉(zhuǎn)換為操作虛擬dom，然后把最終的虛擬dom關(guān)聯(lián)到dom上，關(guān)聯(lián)的方式是把差異應(yīng)用到dom上。
白話文講述Virtual DOM
給予一個(gè)數(shù)據(jù)，根據(jù)這個(gè)數(shù)據(jù)生成一個(gè)全新的Virtual DOM，然后跟上一次生成的Virtual DOM去 diff，得到一個(gè)Patch，然后把這個(gè)Patch打到瀏覽器的DOM上去，即可完成頁面的更新改變。
高效的原因
DOM是很慢的，因?yàn)槠湓胤浅｝嫶?，所以采?strong>js去表示DOM結(jié)構(gòu)，而且只保留了Element之間的層次關(guān)系和一些基本屬性，所以JS所表示的DOM樹結(jié)構(gòu)更加高效。
即僅在DOM是很慢的，因?yàn)槠湓胤浅｝嫶?，，最終實(shí)現(xiàn)整個(gè)DOM樹的更新。
虛擬DOM具體實(shí)現(xiàn)流程
- 用javascript對(duì)象結(jié)構(gòu)表示DOM樹的結(jié)構(gòu)；然后用這個(gè)樹構(gòu)建一個(gè)真正的DOM樹，插到文檔當(dāng)中。
- 當(dāng)狀態(tài)變更的時(shí)候，重新構(gòu)造一顆新的對(duì)象樹，然后用新的樹和舊的樹進(jìn)行對(duì)比，記錄兩個(gè)樹差異
- 把2所記錄的差異應(yīng)用到步驟1所構(gòu)建的真正DOM樹中，視圖就更更新了
