真實(shí)DOM和虛擬DOM的區(qū)別
虛擬DOM是當(dāng)下兩個(gè)主流框架vue和react使用到的技術(shù)，它到底有什么優(yōu)缺點(diǎn)可以讓兩大主流框架所青睞呢？
在了解虛擬DOM之前，我們先了解什么是DOM
? ? DOM（Document Object Model——文檔對(duì)象模型）是用來呈現(xiàn)以及與任意 HTML 或 XML文檔交互的API。DOM 是載入到瀏覽器中的文檔模型，以節(jié)點(diǎn)樹的形式來表現(xiàn)文檔，每個(gè)節(jié)點(diǎn)代表文檔的構(gòu)成部分（例如:頁(yè)面元素、字符串或注釋等等）。
上面的解釋來源于mdn，看起來很高大上，也很難懂？嗯，官方文檔嘛，總歸是有些晦澀難懂的？我個(gè)人的理解就是DOM是一個(gè)js對(duì)象，用于操作頁(yè)面上面的元素。
? ? DOM用于操作頁(yè)面上的元素，那么虛擬DOM當(dāng)然也是用于操作頁(yè)面上的元素，從字面上來理解，就是
? ? 一個(gè)假的DOM，但它同時(shí)也是一個(gè)可以代替DOM樹的一個(gè)普通js對(duì)象，所以它也包含真實(shí)DOM的特性，例如：標(biāo)簽名、標(biāo)簽上的屬性、事件監(jiān)聽、子元素等等
既然已經(jīng)存在DOM對(duì)象了，為什么大家還會(huì)使用虛擬DOM來代替DOM呢？它有什么優(yōu)點(diǎn)呢？
? ? 能減少不必要的 DOM 操作，如果你要添加1000個(gè)節(jié)點(diǎn)，真實(shí)DOM會(huì)一個(gè)一個(gè)的替你增加，但是虛擬DOM可以將多次操作合并為一次操作，減少DOM操作的頻率，如果在1000個(gè)節(jié)點(diǎn)中，只有100個(gè)是新增的話，那么虛擬DOM也只會(huì)操作新增的這100個(gè)，這是通過虛擬DOM的diff算法實(shí)現(xiàn)的。
? ? 跨平臺(tái)渲染，由于虛擬DOM實(shí)際上還是一個(gè)JS對(duì)象，所以它也具有跨平臺(tái)性，不僅可以用于代替DOM，也可以變成小程序，IOS應(yīng)用，安卓應(yīng)用。
虛擬DOM和真實(shí)DOM的速度對(duì)比，沒有什么會(huì)比直接操作DOM速度更快的，但是DOM操作速度快，但是瀏覽器渲染卻十分耗時(shí)，因?yàn)樗且粋€(gè)板凳一個(gè)釘子的去進(jìn)行操作元素，瀏覽器也需要一個(gè)板凳一個(gè)釘子的去渲染頁(yè)面，而虛擬DOM通過減少操作頻率從而減少瀏覽器的渲染時(shí)間，所以在這種情況下，虛擬DOM的速度其實(shí)是高于真實(shí)DOM的，但是操作數(shù)量十分龐大時(shí)，虛擬DOM的速度也會(huì)沒有真實(shí)DOM快。
所以我們可以得到一個(gè)結(jié)論
? ? 當(dāng)操作數(shù)量十分龐大時(shí)，可以選擇DOM操作，數(shù)量一般時(shí)，則可以選擇虛擬DOM文章來源：http://www.zghlxwxcb.cn/news/detail-475288.html
上面說了那么所虛擬DOM的優(yōu)點(diǎn)，那么，虛擬DOM有缺點(diǎn)嗎？
當(dāng)然是有的，虛擬DOM需要額外的創(chuàng)建函數(shù)，如react中的createElement和vue中的h函數(shù)，vue通過vue-loader，react通過babel來解決這個(gè)問題，解決了這個(gè)問題的同時(shí)也造成了對(duì)第三方打包工具的依賴性。文章來源地址http://www.zghlxwxcb.cn/news/detail-475288.html
到了這里，關(guān)于什么是虛擬DOM的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
