什么是DOM

定义

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTMl和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。

模型及扩展

文档对象模型DOM
DOM即文档对象模型，是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解析(parse)。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容 [1] 。

vue中的虚拟DOM原理

1、定义：

虚拟DOM其实就是用一个原生的JS对象去描述一个DOM节点，实际上它只是对真实 DOM 的一层抽象。最终可以通过一系列操作使这棵树映射到真实环境上。

相当于在js与DOM之间做了一个缓存，利用patch（diff算法）对比新旧虚拟DOM记录到一个对象中按需更新， 最后创建真实的DOM

2、虚拟dom原理流程

模板 ==> 渲染函数 ==> 虚拟DOM树 ==> 真实DOM

vuejs通过编译将模板（template）转成渲染函数（render），执行渲染函数可以得到一个虚拟节点树

在对 Model 进行操作的时候，会触发对应 Dep 中的 Watcher 对象。Watcher 对象会调用对应的 update 来修改视图。

虚拟 DOM 的实现原理主要包括以下 3 部分：

用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；
diff 算法 — 比较两棵虚拟 DOM 树的差异；
pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。
图解：

渲染函数： 渲染函数是用来生成Virtual DOM的。
VNode虚拟节点： 它可以代表一个真实的dom节点。通过 createElement 方法能将 VNode 渲染成 dom 节点。简单地说，vnode可以理解成节点描述对象，它描述了应该怎样去创建真实的DOM节点
patch(也叫做patching算法)： 虚拟DOM最核心的部分，它可以将vNode渲染成真实的DOM，这个过程是对比新旧虚拟节点之间有哪些不同，然后根据对比结果找出需要更新的的节点进行更新
3、虚拟DOM好处

具备跨平台的优势–由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node 等。
操作 DOM 慢，js运行效率高。我们可以将DOM对比操作放在JS层，提高效率。运用patching算法来计算出真正需要更新的节点，最大限度地减少DOM操作，从而显著提高性能。Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。
提升渲染性能 Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新
虚拟DOM就是为了解决浏览器性能问题而被设计出来的
[

](https://blog.csdn.net/weixin_43924228/article/details/106586783)