什么是Virtual-DOM, 为什么需要Virtual-DOM

发表于 分类于 阅读次数：

Virtual-DOM是现在前端框架中比较火的一个话题。不仅在React中使用，Vue2.0中也使用了Virtual-DOM。诚然Virtual-DOM对服务器端渲染有很大帮助，但本文主要从数据流方面来看Virtual-DOM带来的变化。

首先看这样一段代码，在input中输入内容可以改变counter的颜色，点击button可以增加counter的值：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<span id="colored-counter">0</span>
<input id="color"></input>
<button id="inc"></button>

<script>
$('#color').on('keyup', function () {
    $('#colored-counter').css('color', this.value);
})

$('#inc').on('click', function () {
    var oldValue = $('#colored-counter').html();
    var newValue = 1 + Number(oldValue);
    $('#colored-counter').html(newValue);
})
</script>

这段代码也可以写成：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<span id="colored-counter">0</span>
<input id="color"></input>
<button id="inc"></button>

<script>
var state = {color: '', value: 0};

function updateUI() {
    $('#colored-counter').css('color', state.color);
    $('#colored-counter').html(state.value);
}

$('#color').on('keyup', function () {
    state.color = this.value;
    updateUI();
})

$('#inc').on('click', function () {
    state.value++;
    updateUI();
})
</script>

实践来看第二种要比第一种好，为什么呢？可以用下图来说明：

virtualDOM01.svg

第一种方式每个事件直接刷新元素。如果事件和元素很多，就会非常混乱：

virtualDOM03.svg

第二种方式将状态独立出来，事件改变状态，元素根据状态而改变，降低了复杂度：

virtualDOM04.svg

在实际使用中，往往不会像上例这么简单。我们再来看这样一个需求，增加或删除DOM节点：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<span id="count">2</span>
<ul>
    <li>hi</li>
    <li>there</li>
</ul>
<button id="add"></button>

<script>
var state = {items: ['hi', 'there']}

function updateUI() {
    $('#count').html(state.items.length);
    // Compare ul.childNodes to state.items and make updates
    // ...
}

$('ul').on('click', 'li', function () {
    state.items.splice($(this).index(), 1);
    updateUI();
})

$('#add').on('click', function () {
    state.items.push(getNextString());
    updateUI();
})
</script>

在这个例子中，有两个不好的地方：

  • 初始状态和预生成的html内容有冗余。
  • 由于要将数据结构与DOM节点进行比较，每次更新都会很复杂。

解决这两个问题的一个简单方法是使用纯函数来渲染界面，这样的话state就成了决定界面展现的唯一因素：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="ui"></div>

<script>
// ...

function render(state) {
    var span = '<span id="count">' + state.items.length + '</span>';
    var lis = state.items.map(function (item) {
        return '<li>' + item + '</li>';
    });
    return span + '<ul>' + lis.join('') + '</ul>'
}

function updateUI() {
    $('#ui').html(render(state));
}

// ...
</script>

即使是很小的变化，上面的代码在每个事件中调用updateUI()时都会重新绘制一遍DOM节点，非常没有效率。Virtual-DOM首先由state生成虚拟节点树，再由节点树绘制DOM节点，之后每次更新时，对节点树进行diff算法，从而进行局部的DOM更新，解决了这个问题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var root = document.getElementById('ui');
var prevState = state, prevTree = [];

function render(state) {
    // Virtual DOM is really just a tree of JavaScript objects or arrays
    return [
        ['span', {id: 'count'}, state.items.length],
        ['ul', {}, state.items.map(function (item) {
            return  ['li', {}, item]
        })]
    ]
}

function updateUI() {
    var vTree = render(state);
    var diff = vDiff(prevTree, vTree); // Just a diff on data structures, haha :)
    vApply(root, diff)                 // Apply series of patches to real DOM

    prevState = deepcopy(state);
    prevTree = vTree;
}

我们可以比较一下 innerHTML vs. Virtual DOM 的重绘性能消耗：

  • innerHTML: render html string O(template size) + 重新创建所有 DOM 元素 O(DOM size)
  • Virtual DOM: render Virtual DOM + diff O(template size) + 必要的 DOM 更新 O(DOM change)

Virtual DOM render + diff 显然比渲染 HTML 字符串要慢，但它依然是纯 JS 层面的计算，比起后面的 DOM 操作来说，依然要高效很多。

相关文献：