Bom 和 Dom 区别 ----- 真是DOM 和 虚拟Dom区别-程序员宅基地
技术标签： 前端 vue 问题 面试啊 javascript 开发语言
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的区别-程序员宅基地
虚拟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展示
智能推荐
windows远程桌面实现之一 （抓屏技术总览 MirrorDriver，DXGI，GDI)_getframedirtyrects-程序员宅基地
文章浏览阅读2.9w次，点赞20次，收藏103次。by fanxiushu 2017-06-14 转载或引用请注明原始作者要实现远程桌面功能，首先要做的就是桌面图片的截取，而且要达到比较流畅的视觉效果，需要到达每秒20帧以上。截取桌面图片，就是定时截取windows桌面的图片，随便怎么都能做到，好像挺简单的。通用的做法就是GetDC（GetDesktokWindow() )获取桌面的DC，然后使用Creat_getframedirtyrects
Python+Selenium简单实现Web自动化测试_使用python+selenium进行简单的自动化测试用例-程序员宅基地
文章浏览阅读2k次，点赞6次，收藏40次。这篇文章是入门级别的应用Python + Selenium进行自动化测试，包括环境搭建及简单的实例。基本思想是用Firefox Selenium IDE插件录制脚本并生成Python代码，用Python结合Selenium及浏览器驱动程序执行脚本。操作系统是Windows，过程中有不明白的地方记得百度下，比如不知道如何打开Windows CMD命令行、不知道如何设置环境变量等，因为本文的前提是读者已有一定的基础知识。安装Python，访问其官网www.python.org下载最新版本，建议选择Pytho._使用python+selenium进行简单的自动化测试用例
outlook2016 修改保存路径-程序员宅基地
文章浏览阅读5k次。http://blog.csdn.net/mergerly/article/details/50008529 （Outlook 2016 pst/ost邮件数据文件迁移实现）_outlook 2016 for mac 更改邮件存放路径
CubeMX+VSCode+Ozone的STM32开发工作流（二）VSCode环境配置_fpv4-sp-d16-程序员宅基地
文章浏览阅读4.5k次，点赞11次，收藏38次。使用arm gnu 工具链编译调试stm32程序，支持daplink和jlink、stlink_fpv4-sp-d16
zookeeper设置临时节点失效时间_ZooKeeper 相关概念以及使用小结-程序员宅基地
文章浏览阅读3.2k次。Dubbo 通过注册中心在分布式环境中实现服务的注册与发现，而注册中心通常采用 ZooKeeper，研究注册中心相关源码绕不开 ZooKeeper，所以学习了 ZooKeeper 的基本概念以及相关 API 操作。ZooKeeper 相关概念session客户端与服务端采用 TCP 长连接，服务端在为客户端创建 Session 会分配一个唯一 sessionId。在 Session timeout..._zk 实例失效时间
计算机视觉中的数据集积累(不断更新)_cdw-2014-程序员宅基地
文章浏览阅读332次。本文记录下那些计算机视觉中的数据集，以供需要时参考。一、用于背景/前景分割、运动目标检测的数据集CDnet 2012CDNet 2014CDW-201(https://www.csdn.net/tags/OtDaUgwsNDEyNTUtYmxvZwO0O0OO0O0O.html)_cdw-2014
随便推点
nxlog windows安装部署-程序员宅基地
文章浏览阅读2.7k次，点赞2次，收藏3次。nxlog 介绍 nxlog 是用 C 语言写的一个跨平台日志收集处理软件。其内部支持使用 Perl 正则和语法来进行数据结构化和逻辑判断操作。不过，其最常用的场景。是在 windows 服务器上，作为 logstash 的替代品运行。同时它也支持Linux、Android系统。官方下载地址：http://nxlog.co/products/nxlog-community-edit..._nxlog 绿色安装
nginx反向代理结合keepalived实现高可用_–no-header-程序员宅基地
文章浏览阅读1k次。一、概念正向代理正向代理最大的特点是客户端非常明确要访问的服务器地址。服务器只清楚请求来自哪个代理服务器，而不清楚来自哪个具体的客户端；正向代理模式屏蔽或者隐藏了真实客户端信息。总结 始服务器(origin server)之间的服务器，为了从原始服务器取得内容，客户端向代理发送一个请求并指定目标(原始服务器)，然后代理向原始服务器转交请求并将获得的内容返回给客户端。客户端必须要进行一些特别的设置才能使用正向代理。客户端必须设置正向代理服务器，当然前提是要知道正向代理服务器的IP地址，还有代理程序的_–no-header
第七篇 STM32CubeMX创建STM32工程之TIM定时器实验_stm32cubemx怎么生成tim.c-程序员宅基地
文章浏览阅读206次。时间计算stm32f103c8t6时钟72M，进行7200分频得到1M信号，1M信号每计数5000进行一次跳变，频率为1hz，周期为1s。该工程配置时晶振选用的无源晶振，第二篇LED的配置中晶振为有源晶振，请读者在配置自己的工程时注意。该程序程序实现LED的翻转，每500ms跳变一次，周期为1S。2.配置毫秒定时器，定时时间500ms。1.配置LED引脚，参考第一篇。1.修改user.c代码如下。3.开启定时器更新中断。_stm32cubemx怎么生成tim.c
STK 11.6 （AGI System Tool Kit）安装包 Matlab与STK互联仿真_stk11 软件下载地址-程序员宅基地
文章浏览阅读1.7w次，点赞26次，收藏33次。软件安装包版本包含stk9.2,stk10,stk11.01,stk11.6。都可与matlab进行互联仿真。stk11.6包含官方各种附加模块，如EOIR,Analyzer,Schedule等等，同时可以用其他软件调用stk进行实时界面显示。同时本人承接stk仿真, matlab 与stk 互联仿真, matlab, GUI等方面项目，可以在咸鱼或添加微信私聊，也可以看博客其他内容介绍..._stk11 软件下载地址
Oracle数据库从入门到精通系列之十九：CDB、PDB、非CDB、SGA、PGA、重做日志、数据文件、临时文件、控制文件、闪回日志、表空间、连接Oracle数据库-程序员宅基地
文章浏览阅读47次。重做日志是由一组物理文件组成的，这些文件被称为重做日志文件组。这样，在数据库发生故障时，可以使用重做日志文件来恢复数据库到故障发生前的状态。重做日志的作用在于保证数据库的一致性和持久性，以及在数据库发生故障时，可以使用重做日志来恢复数据库到故障发生前的状态。总之，非CDB环境下的数据库实例是一种传统的单租户数据库实例，虽然不能实现多租户功能，但在一些特定的场景下，仍然具有一定的应用价值。Oracle数据库的重做日志（Redo Log）是一种记录数据库所有修改操作的机制，它可以保证数据库的持久性和一致性。
C# 获取最新文件_c# getdirectories查今天更新的文件-程序员宅基地
文章浏览阅读4.5k次，点赞3次，收藏13次。public class FileTimeInfo { public string FileName; //文件名 public DateTime FileCreateTime; //创建时间 } /// /// 获取最新文件名 /// /// 路径 /// 后缀名_c# getdirectories查今天更新的文件