Bom 和 Dom 区别 ----- 真是DOM 和 虚拟Dom区别

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频繁的回流和重绘效率非常低

 

虚拟dom展示

真实dom展示 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/615776.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Nerf相关研究

1.Nerf相关研究 随着Luma AI的到来,再次将Nerf推向浪尖,实用性进一步得到强化。Nerf仍以极速的发展速度前行,越来越多的研究方向不断涌现。 4K-Nerf 4K-NeRF: High Fidelity Neural Radiance Fields at Ultra High Resolutions 论文&#…

JVM内存模型深度剖析与优化

欢迎大家关注我的微信公众号: 目录 JVM整体结构及内存模型 JVM内存参数设置 JVM整体结构及内存模型 首先附一段简单代码,我们从代码层面来讲解内存模型 public class Math {public static final int initData 666;public static User user new …

性能测试分析案例-定位DNS解析很慢

环境准备 预先安装 docker 等工具,如 apt install docker.io。 操作和解析 执行下面的命令,拉取案例中使用的 Docker 镜像: docker pull feisky/dnsutils运行下面的命令,查看主机当前配置的 DNS 服务器: cat /etc…

你知道谁才是 “最懂程序员” 的搜索引擎?

大家好,我是奇兵,作为一名程序员,我们开发的过程中几乎每天都和搜索引擎打交道,利用它来搜文档、解决 Bug 等等。 而随着 AI 的发展,搜索引擎也变得越来越智能,市面上也涌现除了越来越多的 AI 搜索引擎。 …

【qt】sdk写pro写法,cv,onnx,cudnn

我的sdk在OpenCV003项目里: pro中添加 CONFIG(release, debug|release) {LIBS -L$$PWD/sdk/onnxruntime-x64-gpu/lib/ -lonnxruntimeLIBS -L$$PWD/sdk/onnxruntime-x64-gpu/lib/ -lonnxruntime_providers_cudaLIBS -L$$PWD/sdk/onnxruntime-x64-gpu/lib/ -lon…

深入探索JavaScript中实用而高级的Rest参数和Spread语法

🧑‍🎓 个人主页:《爱蹦跶的大A阿》 🔥当前正在更新专栏:《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​ ​ ✨ 前言 函数是JavaScript这个语言的核心,而如何处理函数的参数是函数编程中非…

深度学习工具-Amazon SageMaker使用

Amazon SageMaker 深度学习程序可能需要很多计算资源,这很容易超出你的本地计算机所能提供的范围。云计算服务允许你使用功能更强大的计算机更轻松地运行本书的GPU密集型代码。 注册 首先,我们需要在注册一个帐户https://aws.amazon.com/。 为了增加安…

io.lettuce.core.RedisCommandExecutionException: NOAUTH Authentication required.

报错信息: 浏览器中的报错信息 IDEA中的报错信息 报错原因: SpringBoot整合Redis使用的默认配置,但是我们设置了Redis的密码,而默认配置中密码是为空的,导致不能够连接 浏览器中的报错信息 There was an unexpected …

ChatGLM2-6B 大语言模型本地搭建

ChatGLM模型介绍: ChatGLM2-6B 是清华 NLP 团队于不久前发布的中英双语对话模型,它具备了强大的问答和对话功能。拥有最大32K上下文,并且在授权后可免费商用! ChatGLM2-6B的6B代表了训练参数量为60亿,同时运用了模型…

Mac/Linux虚拟机CrossOver2024新版下载使用教程

CrossOver不像Parallels或VMware的模拟器,而是实实在在Mac OS X系统上运行的一个软件,该软件可以让用户在mac是上直接运行windows软件,本文为大家带来的是CrossOver Mac版安装教程! CrossOver Mac-安装包下载如下:http…

zookerper入门

zookerper介绍 ZooKeeper 是一个开源的分布式协调框架,主要用来解决分布式集群中应用系统的一致性问题. ZooKeeper本质上是一个分布式的小文件存储系统(Zookeeper文件系统监听机制).提供基于类似于文件系统的目录树方式的数据存储,并且可以…

typora导出html添加目录

typora导出html添加目录 使用方法 首先要从typora导出html文件,之后用记事本编辑器html文件 找到文档最后面,如图: 用文字编辑类工具打开sideBar.txt,复制其中所有内容【内容在下面】 在如上图的位置插入所复制的内容 打开修改…

漏油控制器有用吗?漏油监测器多少钱一个?

漏油控制器也可以被称作漏油监测器、漏油传感器,是漏油检测系统里的一部分,一般是和漏油检测绳组合在一起使用,用来检测油罐、输油管道、油类化工厂等场合是否有油料泄露。很多人刚开始可能会觉得难以置信,这么一个小东西就可以检…

SPDK中常用的性能测试工具

本文主要介绍磁盘性能评估的方法,针对用户态驱动Kernel与SPDK中各种IO测试工具的使用方法做出总结。其中fio是一个常用的IO测试工具,可以运行在Linux、Windows等多种系统之上,可以用来测试本地磁盘、网络存储等的性能。为了和SPDK的fio工具相…

两周掌握Vue3(四):计算属性、监听属性、事件处理

文章目录 一、计算属性1.什么是计算属性2.代码示例 二、监听属性三、事件处理 代码仓库:跳转 当前分支:04 一、计算属性 1.什么是计算属性 Vue 中的计算属性具有以下作用: 数据处理:计算属性可以用于对数据进行处理和计算&…

格雷希尔G65系列快速接头满足汽车减震器的气压、油压测试要求

当汽车经过不平路面时,汽车减震器可以抑制弹簧吸震后因反弹带来的震荡和来自路面的冲击,为乘客带来平稳舒适的行车体验。减震器在出厂之前,需要模拟汽车的真实行驶环境,在模拟当中需要对它们进行气压和油压的轮番测试。 客户的测试…

ssm基于java web的防疫工作志愿者服务平台的设计与实现论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本防疫工作志愿者服务平台就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数…

PHP短链接url还原成长链接

在开发过程中,碰到了需要校验用户回填的短链接是不是系统所需要的,于是就需要还原找出短链接所对应的长链接。 长链接转短链接 在百度上搜索程序员,跳转页面后的url就是一个长链接。当然你可以从任何地方复制一个长链接过来。 长链接 http…

stm32---输入捕获实验实操(巨详细)

这次来分享上次没说完的输入捕获的知识点 实验中用到两个引脚,一个是通用定时器 TIM3 的通道 1,即 PA6,用于输出 PWM 信号,另一 个是高级控制定时器 TIM1 的通道 1,即 PA8,用于 PWM 输入捕获,实…

vue3 生命周期

与 2.x 版本生命周期相对应的组合式 API beforeCreate -> 使用 setup() created -> 使用 setup() beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onBeforeUpdate updated -> onUpdated beforeDestroy -> onBeforeUnmount destroye…