javascript - "virtual"dom 操作？

Question

我知道进行多个 dom 操作是不好的，因为它会强制进行多次重绘。

即:

$('body').append('<div />')
         .append('<div />')
         .append('<div />')
         .append('<div />');

相反，更好的做法显然是:

$('body').append('<div><div></div><div></div><div></div><div></div></div>');

但我对虚拟操作很好奇

即:

$('<div />').append('<div />')
            .append('<div />')
            .append('<div />')
            .append('<div />')
            .appendTo('body');

它仍然很糟糕吗，显然多次调用一个函数会有一些开销，但是会不会有任何严重的性能影响？

---

我问的原因是:

var divs = [
    {text: 'First',  id: 'div_1', style: 'background-color: #f00;'},
    {text: 'Second', id: 'div_2', style: 'background-color: #0f0;'},
    {text: 'Third',  id: 'div_3', style: 'background-color: #00f;'},
    {text: 'Fourth', id: 'div_4', style: 'background-color: #f00;'},
    {text: 'Fifth',  id: 'div_5', style: 'background-color: #0f0;'},
    {text: 'Sixth',  id: 'div_6', style: 'background-color: #00f;'}
];

var element = $('<div />');

$.each(divs, function(i,o){
    element.append($('<div />', o));
});

$('body').append(element);

假设 div 数组来自描述表单的数据库表(好的，我在示例中使用的是 div，但它可以很容易地用输入替换)或类似的东西。

或者使用我们的“推荐”版本:

var divs = [
    {text: 'First',  id: 'div_1', style: 'background-color: #f00;'},
    {text: 'Second', id: 'div_2', style: 'background-color: #0f0;'},
    {text: 'Third',  id: 'div_3', style: 'background-color: #00f;'},
    {text: 'Fourth', id: 'div_4', style: 'background-color: #f00;'},
    {text: 'Fifth',  id: 'div_5', style: 'background-color: #0f0;'},
    {text: 'Sixth',  id: 'div_6', style: 'background-color: #00f;'}
];

var element = '<div>';

$.each(divs, function(i,o){
    element += '<div ';

    $.each(o, function(k,v){
        if(k != 'text'){
            element += k+'="'+v+'" ';
        }            
    });

    element += '>'+o.text+'</div>';

});

element += '</div>';

$('body').append(element);

Answer 1

首先，虽然阅读像这样的潜在性能影响很好，但您应该始终从测量开始，看看您是否有问题。

如果您看不到问题，请编写最易读的代码。

如果你能察觉到问题，衡量、改变和衡量。

综上所述，您发布的最后一个示例涉及尚未写入 DOM 的元素，因此在 appendTo 将元素添加到 DOM 之前不会重绘。

如果您能捕捉到第二个和第三个示例之间的速度差异，我会感到非常惊讶 - 如果您能看到它们之间的任何重大差异，我会感到非常惊讶。