DOM和BOM的区别 我们都指代,javascript由三个部分组成:
ECMAScript:描述了JS的语法和基本对象
BOM(浏览器对象):与浏览器交互的方法和对象
DOM(文档对象模型):处理网页内容的方法和接
ps:根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他浏览器风格迥异;
DOM是文档对象模型,它指的是把文档当作一个对象来对待,这个对象主要定义了处理网页的内容和接口
BOM 主要处理浏览器窗口和框架,不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括:
弹出新的浏览器窗口 移动、关闭浏览器窗口以及调整窗口大小 提供 Web 浏览器详细信息的定位对象 提供用户屏幕分辨率详细信息的屏幕对象 对 cookie 的支持 IE 扩展了 BOM,加入了 ActiveXObject 类,可以通过 JavaScript 实例化 ActiveX 对象
javacsript是通过访问BOM(Browser Object Model)对象来访问、控制、修改客户端(浏览器),由于BOM的window包含了document,window对象的属性和方法是直接可以使用而且被感知的,因此可以直接使用window对象的document属性,通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM(Document Object Model)模型的根节点。可以说,BOM包含了DOM(对象),浏览器提供出来给予访问的是BOM对象,从BOM对象再访问到DOM对象,从而js可以操作浏览器以及浏览器读取到的文档。其中
BOM是浏览器对象模型,它指的是将浏览器当作一个对象来对待,这个对象主要定义了与浏览器进行交互的方法和接口;
BOM的核心是window,而window对象具有双重角色,它既是js访问浏览器窗口的一个接口,又是一个全局对象(Global);
这就意味着网页中定义的任何对象、变量和函数,都会作为全局对象的一个属性或者方法存在;
Window对象包含属性:document、location、navigator、screen、history、frames Document根节点包含子节点:forms、location、anchors、images、links
从window.document已然可以看出,DOM的最根本的对象是BOM的window对象的子对象。
区别:DOM描述了处理网页内容的方法和接口,BOM描述了与浏览器进行交互的方法和接口。
3.使用标准
1)DOM是W3C的标准,所有浏览器公共遵守的标准
2)BOM是各个浏览器厂商根据DOM在各自浏览器上的实现(表现为不同浏览器定义有差别,实现方式不同)
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的区别-CSDN博客
虚拟DOM与真实DOM的区别(注意:需不需要虚拟DOM,其实与框架的DOM操作机制有关):
1.执行效率:由于真实DOM的操作需要涉及浏览器的布局计算和渲染,执行效率比虚拟DOM低。
2.性能优化:虚拟DOM通过 diff 算法比较新旧DOM节点差异,最终只更新部分节点,可以减少页面渲染的开销,提高性能。
3.开发效率:虚拟DOM可以通过JS对象对DOM进行操作,比直接操作真实DOM更加方便和灵活,同时也可以借助React等框架提供的组件化机制,使得开发效率更高。
什么是虚拟DOM:
虚拟DOM(Virtual Document Object Model)是指用JS对象来描述DOM节点及其属性和内容的层次结构,它是对真实DOM的一种抽象表示,并不是真正的DOM节点。当页面需要更新时,虚拟DOM首先进行比较,找出需要更新的部分,然后批量更新至真实DOM,最终只会引起页面的局部重排和重绘,可以减少页面渲染的开销,提高性能。
真实DOM:
真实DOM(Document Object Model)是指浏览器中的渲染树,由HTML元素、属性、文本和事件组成,当页面中的元素发生变化时,浏览器会重新构建渲染树,此过程会引起页面的重排和重绘,对性能影响较大。
虚拟dom(VNode),假的,不是真实的dom
真实的DOM在浏览器通过dom.api操作的,复杂的对象
虚拟DOM:可以通过this.$slots.default查看
真实的dom是一个对象,它的属性非常多,在浏览器中做dom操作,会比较消耗性能
虚拟dom是一个对象,它的属性相比较于真实的dom就比较少---用少量的属性描述一个dom,无法在浏览器中直接显示
为什么在vue中会用到虚拟dom? 有两点好处:
1.虚拟dom比真实dom体积小,操作是相对来说消耗性能少,如果在页面中删除一个dom,会引起重绘,影响后边元素的布局
1):虚拟Dom不会进行回流和重绘操作
2):虚拟dom进行频繁的修改,然后一次性比较并修改真实DOM中需要改的部分,最后并在真实DOM中进行回流和重绘,减少过多DOM节点的回流和重绘
3)真实Dom频繁的回流和重绘效率非常低
文章来源:https://www.toymoban.com/news/detail-782371.html
虚拟dom展示
真实dom展示
文章来源地址https://www.toymoban.com/news/detail-782371.html
到了这里,关于Bom 和 Dom 区别 ----- 真是DOM 和 虚拟Dom区别的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!