# Vue DOM Diff 算法

说到 Vue 的 DOM Diff,有一个话题肯定绕不开,那就是 Virtual DOM。

在讲解 DOM Diff 之前,我们先来讲讲 Virtual DOM 产生的原因:

引用知乎大佬 @justjavac 的回答

# Virtual DOM

众所周知,DOM 操作在大多数情况下是非常耗时的,这就导致了页面的性能下降。

同时,频繁地操作 DOM 可能造成页面频繁回流(reflow)和重绘(repaint),进一步恶化页面的性能。

在这样的背景下,Virtual DOM 的思想应运而生——使用 JavaScript 数据结构来模拟真实的 DOM 结构,通过操作 JavaScript 数据结构来实现对 DOM 的操作。

当 JavaScript 数据结构发生变化时, 使用 DOM Diff 算法对新旧数据结构进行比对,以性能代价最小化的方式对真实的 DOM 进行操作,减少 DOM 操作对性能的影响。

在 GitHub 上有一个很有名的 Virtual DOM 库 snabbdom/snabbdom,可以作为 Virtual DOM 的学习材料。

我们先尝试使用 JavaScript 来模拟一下 DOM:

<div class="virtual-dom">
  <h1>学习 Virtual DOM</h1>
  <span style="font-size: 24px"
    >如何使用 JavaScript 数据结构来模拟 DOM 结构</span
  >
</div>

用 JavaScript 数据结构来模拟,效果应该是下面这样:

var vnode = {
  tag: 'div',
  attr: {
    className: 'virtual-dom'
  },
  text: '',
  child: [
    {
      tag: 'h1',
      attr: {},
      text: '学习 Virtual DOM',
      child: []
    },
    {
      tag: 'span',
      attr: {
        style: {
          fontSize: '24px'
        }
      },
      text: '如何使用 JavaScript 数据结构来模拟 DOM 结构',
      child: []
    }
  ]
}

大致结构是这样的,不同的框架实现的方式可能不同,这只是一个思路。

# DOM Diff