真实DOM和虚拟DOM

如何高效操作DOM

什么是DOM

DOM（Document Object Model，文档对象模型）是 JavaScript 操作 HTML 的接口.

浏览器真实解析DOM的流程

为什么说操作DOM耗时

• 线程切换

浏览器包含渲染引擎（也称浏览器内核）和 JavaScript 引擎，它们都是单线程运行。单线程的优势是开发方便，避免多线程下的死锁、竞争等问题，劣势是失去了并发能力。
浏览器为了避免两个引擎同时修改页面而造成渲染结果不一致的情况，增加了另外一个机制，这两个引擎具有互斥性，也就是说在某个时刻只有一个引擎在运行，另一个引擎会被阻塞。操作系统在进行线程切换的时候需要保存上一个线程执行时的状态信息并读取下一个线程的状态信息，俗称上下文切换。而这个操作相对而言是比较耗时的。

• 重新渲染

另一个更加耗时的因素是元素及样式变化引起的再次渲染，在渲染过程中最耗时的两个步骤为重排（Reflow）与重绘（Repaint）。
浏览器在渲染页面时会将 HTML 和 CSS 分别解析成 DOM 树和 CSSOM 树，然后合并进行排布，再绘制成我们可见的页面。如果在操作 DOM 时涉及到元素、样式的修改，就会引起渲染引擎重新计算样式生成 CSSOM 树，同时还有可能触发对元素的重新排布（简称“重排”）和重新绘制（简称“重绘”）。
可能会影响到其他元素排布的操作就会引起重排，继而引发重绘，比如：

• 修改元素边距、大小
• 添加、删除元素
• 改变窗口大小

与之相反的操作则只会引起重绘，比如：

• 设置背景图片
• 修改字体颜色
• 改变 visibility 属性值

如何高效操作DOM

• 在循环外操作元素
• 批量操作元素
• 缓存元素集合

虚拟DOM

什么是虚拟DOM

是以javascript对象作为基础的树，用对象的属性来描述节点，并且该对象最少包含标签名( tag)、属性(attrs)和子元素对象( children)三个属性。最终可以通过一系列操作使这棵树映射到真实环境上。

为什么要有虚拟DOM

（用vue举例），vue是数据驱动视图更新的，所以当数据变化的时候，视图也要更新，视图更新是需要操作DOM的，操作真实的DOM是非常消耗性能的
所以可以利用js的计算性能来换取操作DOM所消耗的性能，即，当视图要更新的时候，通过对比数据变动前后的状态，计算出视图哪些地方需要更新，只更新需要更新的地方，其他的不需要的不用关心，这样就减少了操作DOM,用js模拟出虚拟DOM,将更新前的虚拟和新的虚拟DOM进行对比，然后更新视图。

虚拟DOM的作用

虚拟DOM在Vue.js主要做了两件事：

• 提供与真实DOM节点所对应的虚拟节点vnode
• 将虚拟节点vnode和旧虚拟节点oldVnode进行对比，然后更新视图

Vue中的虚拟DOM是如何实现的

Vue中通过一个vnode类来实例化出不同类型的虚拟DOM节点，即，每次传入的参数不同即可实例化出不同的节点类型。可以描述出以下几种类型的节点：

• 注释节点
• 文本节点
• 元素节点
• 组件节点
• 函数式组件节点
• 克隆节点

// 源码位置：https://github.com/vuejs/vue/blob/dev/src/core/vdom/vnode.js

export default class VNode {
   
  constructor (
    tag?: string,
    data?: VNodeData,
    children?: ?Array<VNode>,
    text?