關(guān)于真實(shí)DOM與虛擬DOM
1.在學(xué)習(xí)虛擬DOM之前，讓我們先來(lái)了解一下真實(shí)的DOM結(jié)構(gòu)，這里不得不提的是關(guān)于瀏覽器渲染方面的知識(shí)。

當(dāng)瀏覽器拿到一個(gè)HTML文件，首先會(huì)根據(jù)HTML文件構(gòu)建出一個(gè)DOM樹(shù)來(lái)，并行加載CSS文件，圖片， JS腳本，值得注意的是DOM樹(shù)的渲染和CSSOM渲染是并行執(zhí)行的，而不是串行進(jìn)行的。（JS腳本需要在html尾部加載，或是寫入window.onload方法里，讓DOM加載完成后再去加載JS腳本， 防止進(jìn)程阻塞，JS腳本是同步加載的）。在構(gòu)建完DOM樹(shù)和CSSOM樹(shù)之后，即可開(kāi)始Render Tree即渲染樹(shù)的構(gòu)建，進(jìn)行布局，繪制。

? ? ? ? ? ? ? ? ? ? ??

?
2.為什么要使用虛擬DOM？

?當(dāng)我們對(duì)DOM樹(shù)有大量操作時(shí)，每一次操作都會(huì)進(jìn)行重新渲染。虛擬DOM是構(gòu)建一個(gè)虛擬的DOM樹(shù)， 將多個(gè)改變反應(yīng)到虛擬DOM樹(shù)中去，等頁(yè)面更新完成后，打包對(duì)真實(shí)DOM進(jìn)行操作。 這樣子就可以降低回流或重繪的次數(shù)提高性能。

3.構(gòu)建一個(gè)虛擬DOM

一個(gè)ELement對(duì)象相當(dāng)于虛擬DOM上一個(gè)節(jié)點(diǎn)，參數(shù)如下：tagName：元素名稱props : 元素屬性，例如：class title等（以鍵值對(duì)方式存在）children : 該節(jié)點(diǎn)下的子節(jié)點(diǎn)數(shù)組

? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

現(xiàn)在我們來(lái)定義一個(gè)虛擬DOM樹(shù)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

4.將虛擬DOM映射為真實(shí)DOM
? ? 為Element對(duì)象添加原型方法，render函數(shù)。函數(shù)作用：將虛擬DOM樹(shù)映射為真實(shí)DOM。這里使用了深度優(yōu)先DFS算法進(jìn)行節(jié)點(diǎn)的遍歷。

5.最后一步，將創(chuàng)建的真實(shí)DOM添加入文檔流中。

? ? ? ? ? ? ? ? ? ??
6.顯示效果

? ? ? ? ? ? ? ? ? ??
總結(jié)：虛擬DOM在框架如VUE，React中的運(yùn)用，保證了性能下限，虛擬DOM是JS對(duì)象的抽象化，具有更好的跨平臺(tái)性，無(wú)需手動(dòng)對(duì)DOM進(jìn)行操作。對(duì)于框架而言，是提供一個(gè)普適化的解決方案。使用虛擬DOM在保證代碼的可維護(hù)性下，提供一個(gè)不錯(cuò)的性能。

對(duì)于一些對(duì)性能要求極高的平臺(tái)，如VScode，采用手動(dòng)優(yōu)化DOM的操作進(jìn)行極端的性能優(yōu)化

原文鏈接：https://blog.csdn.net/qq_38918017/article/details/108321192

總結(jié)

以上是生活随笔為你收集整理的构建一个虚拟DOM并转换为真实DOM的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。