因?yàn)镽eact事秀、Vue框架的出現(xiàn)彤断，頁面渲染采用了更高效的虛擬DOM。
一個(gè)dom元素中有許多屬性易迹，操作dom是很耗資源的宰衙，而操作自定義的js對象是很高效。所以在操作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)槠湓胤浅｝嫶螅罱K實(shí)現(xiàn)整個(gè)DOM樹的更新掸掏。
虛擬DOM具體實(shí)現(xiàn)流程
- 用javascript對象結(jié)構(gòu)表示DOM樹的結(jié)構(gòu)茁影；然后用這個(gè)樹構(gòu)建一個(gè)真正的DOM樹，插到文檔當(dāng)中丧凤。
- 當(dāng)狀態(tài)變更的時(shí)候募闲，重新構(gòu)造一顆新的對象樹，然后用新的樹和舊的樹進(jìn)行對比愿待，記錄兩個(gè)樹差異
- 把2所記錄的差異應(yīng)用到步驟1所構(gòu)建的真正DOM樹中浩螺，視圖就更更新了
