BOM & DOM & 虚拟DOM

[Lawguancong]

什么是 DOM 和 BOM？

• DOM 指的是文档对象模型，它指的是把文档当做一个对象来对待，这个对象主要定义了处理网页内容的方法和接口。
• BOM 指的是浏览器对象模型，它指的是把浏览器当做一个对象来对待，这个对象主要定义了与浏览器进行交互的法和接口。
• BOM 的核心是 window，而 window 对象具有双重角色，它既是通过 js 访问浏览器窗口的一个接口，又是一个 Global（全局） 对象。这意味着在网页中定义的任何对象，变量和函数，都作为全局对象的一个属性或者方法存在。
• window 对象含有 location 对象、navigator 对象、screen 对象等子对象，并且 DOM 的最根本的对象 document 对象也是 BOM 的 window 对 象的子对象。

DOM和JavaScript的关系

文档对象模型（DOM）是一个独立于语言，用于操作XML和HTML文档的API,在web端，我们常用来操作HTML，但其实DOM也是可以操作XML文档的。 我们现在知道，DOM是一个独立于语言的API，换句话说，DOM是一个与语言无关的API，别的语言也可以实现操作DOM的具体api，但是它在浏览器中是用JavaScript来实现的，也因此，DOM是现在JavaScript编码中很重要的一部分，因为JavaScript很多时候都在操作底层文档

为什么操作 DOM 慢

https://juejin.cn/book/6844733763675488269/section/6844733763771957256
因为 DOM 是属于渲染引擎中的东西，而 JS 又是 JS 引擎中的东西。当我们通过 JS 操作 DOM 的时候，其实这个操作涉及到了两个线程之间的通信，那么势必会带来一些性能上的损耗。操作 DOM 次数一多，也就等同于一直在进行线程之间的通信，并且操作 DOM 可能还会带来重绘回流的情况，所以也就导致了性能上的问题。

为什么操作DOM会很慢

• 回流的角度
• 重绘的角度
• 布局（layout）和绘制（paint）
• 浏览器内 GUI线程 & JS线程 互斥独立角度(js优先，所以GUI渲染会卡顿)

虽然DOM是由JavaScript实现的，但是在浏览器中都是把DOM和JavaScript分开来实现的，比如IE中，JavaScript的实现名为JScript，放在jscript.dll文件中，而DOM则放在另一个叫做mshtml.dll的库中。在Safari中，DOM和渲染是使用Webkit中的WebCore实现，而JavaScript是由独立的JavaScriptCore引擎实现，同样在Chrome中，同样是使用WebCore来实现渲染，而JavaScript引擎则是他们自己研发的V8引擎。
由于DOM和JavaScript是被分开独立实现的，因此，每一次在通过js操作DOM的时候，就需要先去连接js和DOM，我们可以这样理解：把DOM和JavaScript比作两个岛，他们之间通过一个收费的桥连接着，每一次访问DOM的时候，就需要经过这座桥，并且给“过路费”，访问的次数越多，路费就会越高，并且访问到DOM后，操作具体的DOM还需要给“操作费”，由于浏览器访问DOM的操作很多，因此，“路费”和“操作费”自然会增加，这就是为什么操作DOM会很慢的原因

虚拟DOM的理解

Advanced-Frontend/Daily-Interview-Question#47
key
diff
真实DOM & 虚拟DOM 比较 Update

Virtual DOM 真的比操作原生 DOM 快吗？

Advanced-Frontend/Daily-Interview-Question#47

将HTML字符串编译为虚拟DOM对象的基础实现

https://www.cnblogs.com/hycstar/p/14744413.html

说说有几种类型的DOM节点

https://juejin.cn/post/6844904090149847047

• 文档节点
• 元素节点
• 文本节点
• 注释节点

问题

• 虚拟DOM主要做了什么
• 虚拟DOM本身是什么（JS对象）

参考链接
Advanced-Frontend/Daily-Interview-Question#47
https://www.zhihu.com/question/31809713/answer/53544875