DOM和BOM的區(qū)別? 我們都指代，javascript由三個部分組成：

ECMAScript：描述了JS的語法和基本對象
BOM(瀏覽器對象)：與瀏覽器交互的方法和對象
DOM(文檔對象模型)：處理網(wǎng)頁內(nèi)容的方法和接
ps：根據(jù)宿主（瀏覽器）的不同，具體的表現(xiàn)形式也不盡相同，ie和其他瀏覽器風(fēng)格迥異；

DOM是文檔對象模型，它指的是把文檔當(dāng)作一個對象來對待，這個對象主要定義了處理網(wǎng)頁的內(nèi)容和接口

BOM 主要處理瀏覽器窗口和框架，不過通常瀏覽器特定的 JavaScript 擴展都被看做 BOM 的一部分。這些擴展包括：

彈出新的瀏覽器窗口 移動、關(guān)閉瀏覽器窗口以及調(diào)整窗口大小 提供 Web 瀏覽器詳細(xì)信息的定位對象 提供用戶屏幕分辨率詳細(xì)信息的屏幕對象 對 cookie 的支持 IE 擴展了 BOM，加入了 ActiveXObject 類，可以通過 JavaScript 實例化 ActiveX 對象

javacsript是通過訪問BOM（Browser Object Model）對象來訪問、控制、修改客戶端(瀏覽器)，由于BOM的window包含了document，window對象的屬性和方法是直接可以使用而且被感知的，因此可以直接使用window對象的document屬性，通過document屬性就可以訪問、檢索、修改XHTML文檔內(nèi)容與結(jié)構(gòu)。因為document對象又是DOM（Document Object Model）模型的根節(jié)點?？梢哉f，BOM包含了DOM(對象)，瀏覽器提供出來給予訪問的是BOM對象，從BOM對象再訪問到DOM對象，從而js可以操作瀏覽器以及瀏覽器讀取到的文檔。其中

BOM是瀏覽器對象模型，它指的是將瀏覽器當(dāng)作一個對象來對待，這個對象主要定義了與瀏覽器進行交互的方法和接口；
BOM的核心是window，而window對象具有雙重角色，它既是js訪問瀏覽器窗口的一個接口，又是一個全局對象（Global）；
這就意味著網(wǎng)頁中定義的任何對象、變量和函數(shù)，都會作為全局對象的一個屬性或者方法存在；

Window對象包含屬性：document、location、navigator、screen、history、frames Document根節(jié)點包含子節(jié)點：forms、location、anchors、images、links

從window.document已然可以看出，DOM的最根本的對象是BOM的window對象的子對象。

區(qū)別：DOM描述了處理網(wǎng)頁內(nèi)容的方法和接口，BOM描述了與瀏覽器進行交互的方法和接口。

3.使用標(biāo)準(zhǔn)

1）DOM是W3C的標(biāo)準(zhǔn)，所有瀏覽器公共遵守的標(biāo)準(zhǔn)
2）BOM是各個瀏覽器廠商根據(jù)DOM在各自瀏覽器上的實現(xiàn)（表現(xiàn)為不同瀏覽器定義有差別，實現(xiàn)方式不同）
3）window為BOM對象，而非js對象

4.包含屬性：

BOM： location、navigato、document
DOM：document也是BOM的window的子對象；
PS：DOM的最根本的對象是BOM的window對象的子對象

DOM?

bom

?

真是Dom? ?和? ? ?虛擬Dom

參考：?虛擬DOM和實際的DOM有何不同？_虛擬dom和真實dom的區(qū)別-CSDN博客

虛擬DOM與真實DOM的區(qū)別（注意：需不需要虛擬DOM，其實與框架的DOM操作機制有關(guān)）：

1.執(zhí)行效率：由于真實DOM的操作需要涉及瀏覽器的布局計算和渲染，執(zhí)行效率比虛擬DOM低。
2.性能優(yōu)化：虛擬DOM通過 diff 算法比較新舊DOM節(jié)點差異，最終只更新部分節(jié)點，可以減少頁面渲染的開銷，提高性能。
?3.開發(fā)效率：虛擬DOM可以通過JS對象對DOM進行操作，比直接操作真實DOM更加方便和靈活，同時也可以借助React等框架提供的組件化機制，使得開發(fā)效率更高。

什么是虛擬DOM： ?

? 虛擬DOM（Virtual Document Object Model）是指用JS對象來描述DOM節(jié)點及其屬性和內(nèi)容的層次結(jié)構(gòu)，它是對真實DOM的一種抽象表示，并不是真正的DOM節(jié)點。當(dāng)頁面需要更新時，虛擬DOM首先進行比較，找出需要更新的部分，然后批量更新至真實DOM，最終只會引起頁面的局部重排和重繪，可以減少頁面渲染的開銷，提高性能。

真實DOM：

? ? 真實DOM（Document Object Model）是指瀏覽器中的渲染樹，由HTML元素、屬性、文本和事件組成，當(dāng)頁面中的元素發(fā)生變化時，瀏覽器會重新構(gòu)建渲染樹，此過程會引起頁面的重排和重繪，對性能影響較大。
?

虛擬dom(VNode),假的,不是真實的dom

真實的DOM在瀏覽器通過dom.api操作的,復(fù)雜的對象

虛擬DOM:可以通過this.$slots.default查看

真實的dom是一個對象,它的屬性非常多,在瀏覽器中做dom操作,會比較消耗性能

虛擬dom是一個對象,它的屬性相比較于真實的dom就比較少---用少量的屬性描述一個dom,無法在瀏覽器中直接顯示

為什么在vue中會用到虛擬dom? 有兩點好處:

1.虛擬dom比真實dom體積小,操作是相對來說消耗性能少,如果在頁面中刪除一個dom,會引起重繪,影響后邊元素的布局

1):虛擬Dom不會進行回流和重繪操作

2):虛擬dom進行頻繁的修改,然后一次性比較并修改真實DOM中需要改的部分,最后并在真實DOM中進行回流和重繪,減少過多DOM節(jié)點的回流和重繪

3)真實Dom頻繁的回流和重繪效率非常低

?

虛擬dom展示

真實dom展示?

文章來源地址http://www.zghlxwxcb.cn/news/detail-782371.html

到了這里，關(guān)于Bom 和 Dom 區(qū)別 ----- 真是DOM 和 虛擬Dom區(qū)別的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！